Etch-a-sketch project: trouble with mouseover effect


#1

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!


#2

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) => pixel.style.backgroundColor = 'black');
  4. time for me to brag :stuck_out_tongue:
    https://am00702.github.io/Etch-A-Sketch/ 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

#3

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…