A button can have a valid UUID in its HTML id attribute while a JavaScript selector for it throws a SyntaxError. The failure can appear intermittently because some generated UUIDs begin with a digit. Check how the script builds its selector before generating another ID.
Prepare one UUID for the example
Open the UUID Generator. Choose Version 4 (random), set How many to 1, and use Plain list, one per line. Leave the three formatting options unchecked and press Generate UUIDs.
Your generated value will vary. The fixed example below begins with 6 so you can reproduce the selector problem without repeatedly generating values. Use it on a local test page.
<button type="button" id="6a3d29c0-1b84-4f56-90ab-cd12ef345678">Show details</button>An HTML ID must contain at least one character, contain no ASCII whitespace, and be unique within its element tree. Starting with a digit is allowed. Keep the same ID on the button while testing the lookups below. HTML ID attribute rules
Use the literal ID for a direct lookup
Run this JavaScript after the button exists in the document, for example in the developer console of your test page.
const id = "6a3d29c0-1b84-4f56-90ab-cd12ef345678";
const button = document.getElementById(id);
console.log(button?.textContent);The result is Show details. Pass only the ID value to getElementById(), without a leading hash. The method finds an element by its literal ID and returns null when none matches. DOM lookup rules
Escape the ID when building a CSS selector
The expression document.querySelector("#" + id) passes a CSS selector to the browser. For this digit-leading example, that selector is invalid and throws a SyntaxError. The selector parser fails before it can return a matching element. The DOM standard defines this error for an invalid selector. DOM selector parsing rules
Escape the identifier portion before joining it to the hash.
const selected = document.querySelector("#" + CSS.escape(id));
console.log(selected === button);This prints true. CSS.escape() serializes the ID for use as a CSS identifier, including the escape needed for a leading digit. Escape the ID value itself and keep the selector punctuation outside the call. CSSOM escaping rules
Check the target after fixing the selector
Keep the original UUID in the HTML attribute. The escaped string belongs in the selector expression. Passing that escaped string to getElementById() searches for a different literal value.
If the corrected lookup returns null, inspect the actual element and compare the ID character for character, including letter case and hyphens. Also check that the lookup runs after the element is created. Confirm that both successful methods return the intended button before attaching an event handler.
When the UUID also identifies a saved record, retain its existing mapping while fixing the selector. The separate guide to UUIDs in repeatable test data shows how to preserve those references across related records.