Etch A Sketch Project - problem with counting from zero in darken function after pressing reset button

Hi. I’m almost done with my Etch A Sketch project. I have difficulties with darken button - after pressing reset button, darken() doesn’t start counting from zero.

Here are darken and reset functions:

function darken() {
    let gridItems = document.querySelectorAll('.grid-item');
    gridItems.forEach((gridItem) => {
        gridItem.addEventListener('mouseover', () => {
            gridItem.counter = gridItem.counter || 0;
            gridItem.counter += 1;
            if (gridItem.counter === 1) {
                gridItem.style.background = '#000000';
                gridItem.style.opacity = '0.1';
            } else if (gridItem.counter === 2) {
                gridItem.style.background = '#000000';
                gridItem.style.opacity = '0.2';
            } else if (gridItem.counter === 3) {
                gridItem.style.background = '#000000';
                gridItem.style.opacity = '0.3';
            } else if (gridItem.counter === 4) {
                gridItem.style.background = '#000000';
                gridItem.style.opacity = '0.4';
            } else if (gridItem.counter === 5) {
                gridItem.style.background = '#000000';
                gridItem.style.opacity = '0.5';
            } else if (gridItem.counter === 6) {
                gridItem.style.background = '#000000';
                gridItem.style.opacity = '0.6';
            } else if (gridItem.counter === 7) {
                gridItem.style.background = '#000000';
                gridItem.style.opacity = '0.7';
            } else if (gridItem.counter === 8) {
                gridItem.style.background = '#000000';
                gridItem.style.opacity = '0.8';
            } else if (gridItem.counter === 9) {
                gridItem.style.background = '#000000';
                gridItem.style.opacity = '0.9';
            } else if (gridItem.counter === 10) {
                gridItem.style.background = '#000000';
                gridItem.style.opacity = '1';
            } else {
                gridItem.style.background = '#000000';
                gridItem.style.opacity = '1';
            }
        });
    });
}

function reset(){
    let gridItems = document.querySelectorAll('.grid-item');
    Array.from(gridItems).forEach(gridItem => 
        gridItem.style.background = '#ffffff');       
    gridItems.forEach((gridItem) => {
        gridItem.addEventListener('mouseover', () => {    
            gridItem.style.opacity = '1';
        });
    }); 
    Array.from(gridItems).forEach(gridItem =>    
        gridItem.counter = 0);
}

here is link to my GitHub Etch A Sketch repository:

If anyone could find time to help me understand why this happens, I would realy appreciate it.
Thank you.

Hi this events listeners inside of reset could be the problem.

gridItem.addEventListener('mouseover', () => { 
    gridItem.style.opacity = '1'; });

when you add another eventlistener to these grids the previous doesnt vanish. Probably when you hover a grid, darken() set the correct opacity but the eventListeners in reset() overrides it with opacity 1.

Thank you for your help. But even if I remove these event listeners the problem stays. I guess I will have to come back to this after I get more knowledge.

Hey India, I think it would work if you would remove the event listeners in your reset function and add them again fresh to your gridItems after removing. But for removing an event listener you need to write also the name of the function you want to remove. It does not work with anonymous functions. So you would need to structure your code a bit more.

Thx David. I tried your suggestion, but I guess I don’t know enough JS yet… so I just added a function with location.reload(); I will come back to this some day.