estoy haciendo un simple grabado al agua fuerte un boceto. hasta ahora, la cuadrícula se llenará de color cuando pase el mouse sobre ella. Estoy tratando de crear un botón con una función que borre la cuadrícula de color cuando se hace clic. tal vez borrando la clase que alternará cuando el mouse se desplace sobre la cuadrícula
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 class="grid"></div> <button type="button" class="clearbutton">Clear</button>function clearGrid() { grid.querySelectorAll(".filled").forEach(box => box.classList.remove("filled")) }También traté de jugar con clic: vea el eventHandler modificado y el código comentado. No esperaría que un Etch-a-sketch permitiera eliminar el relleno al pasar el mouse nuevamente
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 class="grid"></div> <button type="button" class="clearbutton">Clear</button>