Uncaught SyntaxError: Failed to execute 'query

Question

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

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.

Answer 1

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']")

Answer 2

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')