Javascript Question posted in
A very good W3school tutorial can be found here.

Using document.querySelector to change the background color of a cell in a 2d array in Javascript

I am using Javascript to make a game for a school assingment. I am making a game based on Wordle and so I am trying to change the color of cells in a 2d array.

I am using document.querySelector to try to change the colors. I am using an array of 0 to compare it to the word that the player is trying to solve for and their input.

It is giving me a TypeError saying the following:

Cannot set properties of null (setting ‘innerHTML’)
Cannot set properties of undefined (setting ‘style’)

I cannot figure out what is causing the error, though I am probably making a simple mistake.

For example, one line of my code was:

document.querySelector("#bg1").style.backgroundColor = "grey";

bg1 is the ID of the first cell. The innerHTML error is occurring from this line and the others similiar:

document.querySelector("#bg1").innerHTML = word[0];

word is the players input from a prompt.

What do I need to change? This is in pure Javascript.

Tags:

2

Answers


  1. 0

    I think you have the script tag before the body tag, So move it after the body tag and every thing will be okay.

    Login or Signup to reply.
  2. 0

    From your console message below:

    Cannot set properties of null (setting 'innerHTML')
Cannot set properties of undefined (setting 'style')

    I guess the condition of document.querySelector(<condition>) is wrong so it cannot find the corresponding HTML Element.

    I recommend you to open the dev-tool, navigate to ‘console’ tab and just type the following code:

    document.querySelector("#bg1")

    And maybe figure out something?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search