Uncaught SyntaxError Failed to execute querySelector on Document

Question

lt button id  quot   item  id     quot  class  quot btnDeactivateKeyInChildPremiumCustomer waves-effect waves-light quot  gt ok lt  button gt   I used above code for generating button inside of jquery each function The button created dynamically and when i clicked the button   it should show the progress on the button  Im using this Ladda Button Loader  btnDeactivateKeyInChildPremiumCustomerClick   function event      var id   event currentTarget id     var btnProgress   Ladda create document querySelector     id          btnProgress start    or btnProgress stop       And then i passed the button the event handler catch the event process the above function Inside that function it will create a btnProgress object  After that i can call start   or stop   functions I have successfully worked the in the case of only one button without creating the button dynamically inside each   But in the for each case it is showing some errors while executing var btnProgress   Ladda create document querySelector     id    Error Uncaught SyntaxError  Failed to execute  querySelector  on  Document     22  is not a valid selector

User · Accepted Answer

You are allowed to use IDs that start with a digit in your HTML5 documents:

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

But querySelector method uses CSS3 selectors for querying the DOM and CSS3 doesn't support ID selectors that start with a digit:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.

Use a value like b22 for the ID attribute and your code will work.

Since you want to select an element by ID you can also use .getElementById method:

document.getElementById('22')

User · Answer

Although this is valid in HTML  you can t use an ID starting with an integer in CSS selectors   As pointed out  you can use getElementById instead  but you can also still achieve the same with a querySelector   document querySelector   id  22

[javascript] Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document'

Examples related to javascript

Examples related to jquery

Examples related to backbone.js