I've finished the etch a sketch challenge but need help with one function please!

I’m very happy with the outcome of my game. I’ve surprised myself with what I was capable of producing with my level of knowledge

However, the function i can’t seem to get working is the clear grid function. Its not making sense to me

if you have a look, - I’ve created the div class and assigned them to all divs created in the loop. but when I try to manipulate them by adding white (clearing them) when the button is clicked. nothing happens. Im sure this is because of the scope but i have no idea how to sort it out.

I tried to with the let babies variable i created there but that still didn’t work. Please help

It would have been really helpful for you to put your code in a repl.it so that people can interact with your code to trouble shoot. Just looking at your code on github isn’t the same, as being able to interact with it. I ended up copying your code to my computer, to because I needed to use dev tools to help me get to the bottom of your problem.

However, I think I was able to figure out a few things to point you in the right direction. First, I think you had a typo using capital Document. I also think you want to select all of them, not just one.

const erasingColor = Document.querySelector('.div-kids')
const erasingColor = document.querySelectorAll('.div-kids');

In addition, if you use ‘All’ you will need to use forEach to iterate through all of them (in the DOM lesson). erasingColor.forEach ...

On a side note, I found it a little confusing that there was not a default grid already in the etch-a-sketch and that I had to create one. Not a deal breaker, but I thought I’d mention it. Also, I liked your color scheme. Nice & clean - white and blue. Looks quite sharp!

Sorry about that. I see in the student’s solution to the projects that some can be interacted with through the ‘view in web browser’ link once uploaded to git. So i assumed there was a way to interact with it that I wasn’t aware of.

Thanks for the default grid recommendation, I completely didn’t think of that lol.

Sorry, I’m still getting confused with the code to erase the colour. I’ve tried;

let erasingColor = document.querySelectorAll('.div-kids');

clearGrid.addEventListener('click', () => {
    for (let i = 0; i < erasingColor.length; ++i) {
        erasingColor[i].style.color = "green";
}
})

And

erasingColor.forEach(() => {
      clearGrid.addEventListener('click', (e) => {
      erasingColor.style.backgroundColor = 'green'

    });

  });

but nothing seems to be working. Do you know what the code should be? what am i doing wrong?

Heres the repl btw :slight_smile:

Thanks for the repl.it link!

You are right track. I was looking at doing all of the logic for the clearGrid.addEventListener to be inside the function. So, declaring your variable, like you had yesterday. Then doing a .forEach on that variable. You are making it more difficult by trying to attach another event listener on lines 50-56, just do a forEach for the style.backgroundColor = "green");

Here is fork of your repo, with a working solution for the clearGrid. Just take a glance at it, then try and replicate it in your own file.

If this was reddit I’d give you gold! thank you so much