Issue with resizing grid etch-a-sketch

Hi, I am currently doing the etch a sketch project, and when I try to resize the grid, it either covers most of the grid in black or all and more of it. Does anyone know what is happening with it?
JsFiddle: https://jsfiddle.net/5xzn8ftk/1/
Thanks.

I think what is happening is that when the grid is re-sized it is using the same <div>s that were previously created. So if the <div> is black, it stays black. To test this theory, I just made the first one black, then re-sized the grid and only the first one stayed black.

To expand on this ‘problem’, when a new grid is created, is it adding more squares? For example, the default 16x16 (has 256 squares), then a 20x20 (has 400 squares), so will there be 656 squares in total? To test this, you can give each square a class name of 'i' when you create them, then check it out in dev tools.

Hi, I have done this and have found that you are correct, do you know how I could just get the new divs and not the previous ones? If not thats totally fine.
Thanks.

Hi, I fixed it by clearing the container before creating the new elements, thanks for finding what the problem was.

Great job getting to the bottom on your issue! This is just one of many learning curves that you’ll experience in web dev 101. When you find something unusual happening (like this), take your time and dig through the dev tools to help you figure it out. In addition, I would put in console.log(variable) to help figure the value of a variable. Sometimes, I would even comment out code to help me get to the bottom of where the problem started.

I would say to myself “The computer is doing what I’ve told it to do, now I need to understand exactly what I told it to do”. This mindset helped me slow down & look at a problem like an investigator or code ‘explorer’.

Thank you!