Etch-a-sketch - I can't make the reset button work


#1

Hi everyone! As the title states, I’m on the etch-a-sketch project, and I’ve hit my very first wall: I can’t make the button clear the grid. I’ve been stuck in it for almost 3 full days, I think I tried everything I could, but to no avail, unfortunately.

It’s probably a banal issue but hey, I’m quite of a beginner :slight_smile: Any kind of help will be appreciated! Here’s my code:

CSS

#container {
    display: grid;
    width: 600px;
    height: 600px;
    margin: 0 auto;
    position: relative;
    border: 4px solid black;
}

.gridBox {
    border: 1px solid white;
    box-sizing: border-box;
}

.hoverGridBox {
    background-color: black;
}

#newGridButton {
    margin: auto;
    display: block;
    margin-bottom: 10px;
}

JS:

function createGrid(x) {
    const container = document.querySelector('#container');
    for(let i = 0; i < x * x; i++) {
      const content = document.createElement("div");
      content.classList.add("gridBox");
      container.appendChild(content);
    }
    container.setAttribute('style', `grid-template-columns: repeat(${x}, auto)`);
  }

function modifyColor() {
  let grid = document.querySelectorAll(".gridBox");
  grid.forEach((box) => {
    box.addEventListener('mouseenter', (e) => {
      box.classList.add("hoverGridBox");
    });
  });
}

function clearGrid() {
  var hoverGrid = document.getElementsByClassName("hoverGridBox");
  for(i = 0; i < hoverGrid.length; i++) {
    hoverGrid[i].style.backgroundColor = "white";
  }
}

document.getElementById("newGridButton").onclick = clearGrid();

createGrid(16);
modifyColor();

#2

document.getElementById("newGridButton").onclick = clearGrid();

The function you assign to onclick should be a callback. In javascript when you call a function using parens () it runs that function immediately. So what your code is really saying is run the clearGrid function, and assign the return value of that to the onclick event handler. Since the clearGrid function doesn’t have a return value it assigns undefined to the onclick event.

You have two options here.

One, remove the parens.

document.getElementById("newGridButton").onclick = clearGrid;

The other is to call clearGrid in an anonymous function

document.getElementById("newGridButton").onclick = function() { clearGrid(); };

Using an anonymous function in this case isn’t necessary, but if you need to pass some arguments to clearGrid then you couldn’t do that using the first solution because if you pass the arguments inside () it would call the function.

Try the first solution and see if it works.


#3

It worked! I still need to get better at troubleshooting, I wasn’t that far from the solution.

Using an anonymous function was one of the solutions I tried, but I think I messed up with the syntax and it didn’t work. Thanks!