Etch-a-sketch project: trouble with mouseover effect


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 ( 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!


few reasons :grin:

  1. you selected using query selector (use querySelectorALL)
  2. you use forEach() to loop over each element (re-read docs)
  3. you should pass a value for addEventListener
    gridItem.addEventListener("mouseover", (pixel) => = 'black');
  4. time for me to brag :stuck_out_tongue: check mine out :slight_smile:
    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 :smile:
    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:

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…