how to write a button that will empty the colored grid-CodePudding

i am making a simple etch a sketch. so far the grid will fill with color when you hover a mouse over it. i am trying to create a button with a function that clears the grid of color when clicked. maybe by clearing the class that will toggle when the mouse hovers over the grid

const grid = document.querySelector('.grid');
grid.addEventListener('mouseover', handleClick);

const clear = document.querySelector('.clearbutton')
clear.addEventListener('click', clearGrid);

function getGrid(gridNumber) {
    for (let i = 1; i <= gridNumber * gridNumber; i  ) {
        const box = document.createElement('div');
        box.classList.add('box');
        grid.appendChild(box);
    }
}

getGrid(16);

function handleClick(e) {
    if (e.target.matches('.box')) {
        e.target.classList.toggle('filled');
    }
}

function clearGrid(){}

.banner {
  display: flex;
  justify-content: center;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 0 2em 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
}

.box {
  height: 20px;
  width: 20px;
  border: 1px solid rgb(122, 121, 121);
  background-color: lightgray;
}

.box:hover {
  cursor: pointer;
}

.box:hover:not(.filled) {
  background-color: rgb(151, 179, 195);
  opacity: 0.3;
}

.filled {
  background-color: black;
}

.buttoncontainer {
  display: flex;
  gap: 10px;
  justify-content: center;
}

<div ></div>
<button type="button" >Clear</button>

CodePudding user response：

function clearGrid() {
  grid.querySelectorAll(".filled").forEach(box => box.classList.remove("filled"))
}

I also tried to play with clicked - see the changed eventHandler and the commented out code. I would not expect an Etch-a-sketch to allow to remove the filled by mousing over again

const grid = document.querySelector('.grid');
grid.addEventListener('mouseover', handleMouse);
grid.addEventListener('click', handleMouse);

const clear = document.querySelector('.clearbutton')
clear.addEventListener('click', clearGrid);

function getGrid(gridNumber) {
  for (let i = 1; i <= gridNumber * gridNumber; i  ) {
    const box = document.createElement('div');
    box.classList.toggle('box');
    grid.appendChild(box);
  }
}

getGrid(16);

function handleMouse(e) {
  const tgt = e.target;
  if (tgt.matches('.box')) {
    if (e.type==="mouseover") tgt.classList.toggle('filled');
    // else if (e.type==="click") tgt.classList.add('filled');
  }
}

function clearGrid() {
  grid.querySelectorAll(".filled").forEach(box => box.classList.remove("filled"))
}

.banner {
  display: flex;
  justify-content: center;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 0 2em 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
}

.box {
  height: 20px;
  width: 20px;
  border: 1px solid rgb(122, 121, 121);
  background-color: lightgray;
}

.box:hover {
  cursor: pointer;
}

.box:hover:not(.filled) {
  background-color: rgb(151, 179, 195);
  opacity: 0.3;
}

.filled {
  background-color: black;
}

.buttoncontainer {
  display: flex;
  gap: 10px;
  justify-content: center;
}

<div ></div>
<button type="button" >Clear</button>