Uncaught DOMException: Document.querySelector: '.3-1' is not a valid selector

Question

Basically I'm gonna update this class' html but I keep getting the same error and have absolutely no idea why

document.querySelector(`.${clickField}`).innerHTML = `<img src ='${icon}.svg'>`

Uncaught DOMException: Document.querySelector: '.3-1' is not a valid selector

(I've seen similar questions but they all have jquery etc so i didnt understand shit from them)

Someone just said classes cant start w numbers he's right im so dumb lmfao image of 3-1 existing in DOM

What that is saying is that the contents of `clickField` is `3-1` and it can't find that anywhere in the dom as classes can't start with a digit. — imvain2, Aug 12 '20 at 20:52
Most likely an issue that the class name you are trying to use starts with a numerical — Taplar, Aug 12 '20 at 20:53
@imvain2 classes *can* start with a digit but the values must be properly escaped in CSS selector strings — Pointy, Aug 12 '20 at 20:57
@D.Pardal 3-1, the result coming from there is correct is probably happening because classes cant start with numbers i completely forgot about that — Ase Last, Aug 12 '20 at 20:58
https://jsfiddle.net/4f5zL7ko/1/ Query selector errors on the starting with a number. The explicit class lookup doesn't care. — Taplar, Aug 12 '20 at 20:59

score 0 · Answer 1 · answered Aug 12 '20 at 21:03

I'm assuming clickField is supposed to be the class of the element you want to get. In that case, since the class starts with a digit, the easiest way to select it using CSS selector is using attribute selectors, like so:

document.querySelector(`[class="${clickField}"]`).innerHTML = `<img src ='${icon}.svg'>`

If clickField might contain " characters, you need to replace ${clickField} by ${clickField.replace(/"/g, '\\"')} to escape them properly.

There is also a far easier way, using document.getElementsByClassName():

document.getElementsByClassName(clickField)[0].innerHTML = `<img src ='${icon}.svg'>`

Classes may contain any characters except space, as the HTML standard imposes no restrictions on them.

still getting the same error, just found the fix though – Ase Last Aug 12 '20 at 21:10 — Ase Last, Aug 12 '20 at 21:10

Uncaught DOMException: Document.querySelector: '.3-1' is not a valid selector

1 Answers1