"Cannot Read Property 'appendChild' of null - Etch-A-Sketch project


#1

Hello everyone, I have hit a snag in trying to create the grid for the etching and the sketching. I am getting the error I previously mentioned, “Cannot Read Property ‘appendChild’ of null”, on my attempts to append both the row to the container div, and the container div to the body. It seems to have run smoothly in the first iteration when I appended the cell to the row. I have defined the divs needed earlier in the function so I’m not certain why I am getting a null error here. Any help would be appreciated, thanks!

function grid(body) {
const container = document.querySelector("#container");
for (i = 0; i < 16; i++){
var row = document.createElement(‘div’);
row.className = “row”;
row.id = “row” + i;
for (h = 0; h < 16; h++){
var cell = document.createElement(‘div’);
cell.className = “cell”;
row.appendChild(cell);
};
container.appendChild(row);
};
body.appendChild(container);
};
grid(document.querySelector(“container”));


#2

Might be easier to help if you post all your code. Or get it working in a codepen or repl.


#3

The funny part is, that is essentially the entire code sans an HTML skeleton. But I think I found at least part of the solution. Since this is using DOM manipulation, I may have incorrectly placed the tags in said HTML; therefore making it useless. I can’t test the actual project out until I get home from work, but I just made a simple test using DOM stuff with the script at the top and it wasn’t functioning in the same way. Moved the script to the bottom of the and bam. Miraculous lol. Hopefully this gets me back on track.


#4

Yeah, Javascript is evaluated as soon as it is encountered so if it’s before the HTML DOM has been built then trying to find elements etc returns undefined. Sounds like you’re on the right path friend.