Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document'
Closed this issue · 3 comments
Cannot parse ID starting with number, working with RIL4jg1ao, error with 0RIL4jg1ao
My DOM:
<div class="comment-replies ms-5 ms-md-5" data-comment-id="0RIL4jg1ao"></div>Parse
htmx.find('.comment-replies[data-comment-id=0RIL4jg1ao]')ERROR:
htmx.min.js:1 Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '.comment-replies[data-comment-id=0RIL4jg1ao]' is not a valid selector. at r (htmx.min.js:1:6434) at Object.r [as find] (htmx.min.js:1:6463) at <anonymous>:1:6 r @ htmx.min.js:1 r @ htmx.min.js:1 (anonymous) @ VM14465:1Understand this error
This is a limitation of the use of CSS selectors which is what htmx uses. While a id that starts with a number is valid in the html specification it is not useable by css selectors. It is important to make sure your id's do not start with numbers and you can prefix your id's with "-" "_" or [a-z][A-Z] and then css selectors will work without issue.
Hey, as this is an attribute value selector and not an ID selector (using the # syntax that, as @MichaelWest22 mentioned, wouldn't support such a name starting with a number), you're probably simply missing quotes around your value, i.e. you should write it as
htmx.find('.comment-replies[data-comment-id="0RIL4jg1ao"]')Htmx uses querySelector under the hood so you can refer to the latter's documentation on how to query by attribute value.
Hope this helps!
@MichaelWest22 , @Telroshan
Thanks for suggestion, it's working on JQuery, htmx not. I've added prefix to fix