Uncaught SyntaxError: Failed to execute 'querySelector' in 'Document'

Question

'<button id="'+item['id']+'" class="btnDeactivateKeyInChildPremiumCustomer waves-effect waves-light>ok</button>' 

I used the above code to generate a button inside the jquery of each function. The button was created dynamically, and when I pressed the button, it should show the progress on the button. I am 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 to the event handler to capture the event process above. Inside this function, it will create a btnProgress object. After that, I can call the start () or stop () functions. I successfully worked in the case of only one button without dynamically creating a button inside each. But in each case, it shows some errors when executing var btnProgress = Ladda.create (document.querySelector ('#' + id))

Mistake

 Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '#22' is not a valid selector. 

Answer 1

You are allowed to use identifiers starting with a number in your HTML5 documents:

The value must be unique among all identifiers in the home subtree of the element and must contain at least one character. The value must not contain spaces.

There are no other restrictions on what form an identifier can take; in particular, identifiers can consist only of numbers, begin with a number, begin with an underscore, consist only of punctuation marks, etc.

But the querySelector method uses CSS3 selectors to query the DOM, and CSS3 does not support identifiers starting with a digit:

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

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

Since you want to select an item by ID, you can also use the .getElementById method:

 document.getElementById('22')