Issue with opacity in Etch-a-Sketch

Hi, I started doing TOP a few weeks ago and currently doing the Etch a Sketch project. I think im almost done with it, but got an issue with the opacity button and cant figure out what is wrong.
The problem seems to be that the random color button is overriding the opacity of the grey scale button, even if (i believe) they have the opacity reset when the button is pressed.

project code: https://github.com/sebastianlares92/Etch-a-Sketch/blob/master/script.js
web version: https://sebastianlares92.github.io/Etch-a-Sketch/

the styling of the buttons and the web in general isnt finished, I wanted to tackle this problem before the final styles.
Sorry if the code is hard to read, still learning everything.
Any help is really appreciated.

Hi Seb, the problem is that every time the user clicks a button (random color, grey scale) you assign a new event listener on top of the default you have at load. So you are adding a new event listener but the old ones are still there and working competing with each other (I hope that makes sense).
The better approach will be to have one event listener for all the cells and have a variable for example that changes the color according to the button pressed before (random color or grey scale) or a different function.

el.addEventListener(‘mouseover’, () => {
el.style.background = //variable or function according to the selected color mode
el.style.border = ‘0.5px solid #272626’;
});
I hope that helps. Looking forward to see the finished project :slight_smile:

1 Like

It did! Thanks for the reply, currently working on the fix. Thanks alot :smiley: