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 class="grid"></div>
<button type="button" class="clearbutton">Clear</button>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 class="grid"></div>
<button type="button" class="clearbutton">Clear</button>