Hey there! I’m currently working on the Etch-a-Sketch project in the Web Dev 101 curriculum. I was able to populate the 16 x 16 grid with JS, but the code I’m using (https://codepen.io/katze033/pen/dybjjEg) for the mouseover event (Line 31) doesn’t work. What puzzles me is that if I swap out the backgroundColor style with console.log(‘test’), I see the test string populate in the console. Why does that work but the backgroundColor style doesn’t? Any advice would be appreciated. Thanks in advance!
- you selected using query selector (use querySelectorALL)
- you use forEach() to loop over each element (re-read docs)
- you should pass a value for addEventListener
gridItem.addEventListener("mouseover", (pixel) => pixel.style.backgroundColor = 'black');
- time for me to brag
https://am00702.github.io/Etch-A-Sketch/ check mine out
Hope it works!
I would be happy if you show me progress
Also if you have any problem that you can’t solve I am here all day
ps…if you want your etchASketch to be maintainable organise your code and add comments for each scetion
Thanks for the tips. Your help kept me from getting totally discouraged. It isn’t finished and I haven’t had a chance to make it “look purty,” but basic functionality is there: https://codepen.io/katze033/pen/wvwOwoL
The change grid size/reset button relies on location.reload(). Doesn’t seem to trigger when the script is hosted within codepen. But you get the gist…