"document.querySelector(...) is null" even tho it exist

Question

I created 64 class in numbers (1,2,3,4...) and it seems that there are a lot of case specific things to do so I can use them normally like this

document.querySelector(".\\" + number)

For some reason when I try to create an img inside the div it says that it dosen't exist.

Here's the code related to the error:

HTML:

<div id="board">
<div style="width: 61.2219px; height: 61.2219px;" class="1"></div>
<div style="width: 61.2219px; height: 61.2219px; background-color: white;" class="2"></div>
<div style="width: 61.2219px; height: 61.2219px;" class="3"></div>
<div style="width: 61.2219px; height: 61.2219px; background-color: white;" class="4"></div>
<div style="width: 61.2219px; height: 61.2219px;" class="5"></div>
<div style="width: 61.2219px; height: 61.2219px; background-color: white;" class="6"></div>
...
<script src="main.js"></script>

JS:

while (x != 8)
{ **// Generates DIV**
  if (last == 0)
  {
    last = 1;
  }
  else
  {
    last = 0;
  }

  while (y != 8)
  {
    var div = document.createElement("div");
    div.style.width = width;
      div.style.height = width;
    if (last == 0)
    {
      div.style.backgroundColor = "white";
      last = 1;
    } else 
    {
      last = 0;
    }
    div.classList.add(((x*8)+y)+1)
    board.appendChild(div);
    y++;
  }
  y=0
  x++;
}
...
while(x != startpos_len)
{
  console.log(x);
  let name = ".\\" + (x+1)
  var imgPiece = document.createElement("img");
  switch(startpos[x])
  {
    case "BR":
      img.src = "."
    default:
      // alert("Startpos contain errors")
  }
  **document.querySelector("div" + name).appendChild(imgPiece);**
  x++;
}

PS: This is a chess game

I tried reading documentation on Mozilla, w3school and similar error on stack overflow, but nothing was working.

Also defer in didn't change anything

Changing to ID's or adding letters in the class didn't work

As you can see [here](https://www.w3schools.com/tags/att_global_class.asp) class names must begin with a letter. — afarrag, Jan 04 '23 at 04:38
Have you checked https://stackoverflow.com/questions/20306204/using-queryselector-with-ids-that-are-numbers? — flyingfox, Jan 04 '23 at 04:38
Why do you have `\\` in your selector when its not in class? Should it not be `"." + x+1`? — Rajesh, Jan 04 '23 at 04:41
This isnt the problem. You can use class with numbers like this querySelector(".\\" + 1). Also using ID didn't work and adding letters in the class didn't work — 4C3 B13D4RT, Jan 04 '23 at 04:41
RaJesh, class with numbers are case specific and requires .\\1 to work else it will fail — 4C3 B13D4RT, Jan 04 '23 at 04:42
Uncaught TypeError: document.getElementById(...) is null http://localhost:5500/main.js:133 — 4C3 B13D4RT, Jan 04 '23 at 04:55
Your selector syntax is simply incorrect. If you use `\`div[class='${x+1}']\`` it does work though why not simply use better `id` attributes, eg `id="piece-1"` — Phil, Jan 04 '23 at 04:56
it's highly unusual to give a classname just a number. if you really want a number in there, try adding a letter first. 'x1' and 'x2' etc — Ringo, Jan 04 '23 at 05:04

Phil · Answer 1 · 2023-01-04T05:25:33.583

1

Your selector syntax is incorrect.

Your options are...

Preferably use id attributes that are actually selectable. This makes sense given you seem to want unique elements (chessboard positions)

<div style="width: 61.2219px; height: 61.2219px;" id="pos-1"></div>

document.getElementById(`pos-${x+1}`)?.appendChild(imgPiece);

OR

Not recommended... keep the (bad) numeric classes and use an attribute selector. Note the quotes around the value are required

document.querySelector(`div[class='${x+1}']`)?.appendChild(imgPiece);

Note that this only works with class attributes that are single-token. If there are other classes involved, eg class="foo bar baz 1", it gets more complex

document.querySelector(
  `div[class='1'], div[class^='1 '], div[class$=' 1'], div[class*=' 1 ']`
);

edited Jan 04 '23 at 05:25

answered Jan 04 '23 at 05:01

Phil

157,677
23
242
245

This isn't... what? – Phil Jan 04 '23 at 05:08
[class="x"] is wrong. The selector for a class begins with a '.' – Ringo Jan 04 '23 at 05:09
'.pos-1' is a class selector – Ringo Jan 04 '23 at 05:10
1

@Ringo I specifically said _"use an attribute selector"_. That is the only way to select the elements in OP's question – Phil Jan 04 '23 at 05:11
Was "?" a typo right before appendChild – 4C3 B13D4RT Jan 04 '23 at 05:12
i see what you're doing, but it's not a good solution at all. Why would you even recommend that – Ringo Jan 04 '23 at 05:13
@4C3B13D4RT No, it's just type safety. Both methods may return `null` – Phil Jan 04 '23 at 05:13
1

? is not a typo, see here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining – Ringo Jan 04 '23 at 05:14
@Ringo sometimes the HTML cannot be changed – Phil Jan 04 '23 at 05:14
you didn't read the post then – Ringo Jan 04 '23 at 05:14
@Ringo cover-to-cover. In the spirit of providing canonical answers to questions, I will leave the 2nd option as the only way I could see to select elements by numeric classname – Phil Jan 04 '23 at 05:16
I tried using class before using class and it didn't work, but using id with text in front worked. I don't know why I complicated my life. – 4C3 B13D4RT Jan 04 '23 at 05:19
Your adding the comment recommending not to do it that way is good, thanks. – Ringo Jan 08 '23 at 01:44

"document.querySelector(...) is null" even tho it exist

1 Answers1