Why does JS code var a document querySelector a data-a 1 cause error

Question

I ve an element in the DOM    lt a href     data-a  1  gt Link lt  a gt   I want to get this element via its HTML5 custom data attribute data-a  So I write JS codes   var a   document querySelector  a data-a 1      But this code doesn t work and I get an error in browser s console   I tested Chrome and Firefox    JS code var a   document querySelector  a data-a a     doesn t cause error  So I think the problem is that HTML5 s JS API document querySelector doesn t support to look for the number value in HTML5 custom data attribute   Is this a problem of browser implementation bug or a problem of HTML5 s spec relevant to document querySelector   Then I tested codes below on http   validator w3 org     lt  DOCTYPE html gt   lt meta charset  utf-8  gt   lt title gt An HTML Document lt  title gt   lt a href     data-a  1  gt Link lt  a gt    They re validated  Since these HTML5 codes are validated  We should can use HTML5 s JS API document querySelector to look for this anchor element via its custom data attribute  But tha fact is that I get error   Does HTML5 s spec to HTML5 JS API document querySelector say that this method can not look for an HTML5 data custom attribute with a number value   An HTML5 spec source is wanted

User · Answer

Yes strings must be quoted and in some cases like in applescript  quotes must be escaped  do JavaScript  document querySelector  span    amp  attrName  amp         amp  attrValue  amp         click

User · Answer

An example with variable  ES6    const item   document querySelector  data-itemid    id

User · Answer

You could use  var a   document querySelector  a data-a  1        instead of  var a   document querySelector  a data-a 1

User · Answer

From the selectors specification      Attribute values must be CSS identifiers or strings    Identifiers cannot start with a number  Strings must be quoted   1 is therefore neither a valid identifier nor a string   Use  1   which is a string  instead   var a   document querySelector  a data-a  1

User · Answer

Because you need parentheses around the value your looking for  So here   document querySelector  a data-a  1      If you don t know in advance the value but is looking for it via variable you can use template literals    Say we have divs with data-price   lt div data-price  99  gt My okay price lt  div gt   lt div data-price  100  gt My too expensive price lt  div gt    We want to find an element but with the number that someone chose  so we don t know it       User chose 99     let chosenNumber   99 document querySelector   data-price    chosenNumber

User · Answer

Took me a while to find this out but if you a number stored in a variable  say x and you want to select it  use   document querySelector  a data-a    CSS escape x             This is due to some attribute naming specifications that I m not yet very familiar with  Hope this will help someone

[javascript] Why does JS code "var a = document.querySelector('a[data-a=1]');" cause error?

Examples related to javascript

Examples related to html

Examples related to css-selectors

Examples related to custom-data-attribute

Examples related to selectors-api