tratando de hacer el etch-a-sketch tengo un problema al agregar la opcion de poder cambiar la cantidad de "grillas" que hay: Ejemplo del etch-a-sketch:
El problema empezo por que se acumulaban, ya que se ejecuta la función makeRows
varias veces al intentar cambiar la cantidad de cuadrados en la grilla,por que pasaba esto:
Y lo solucione agregando una function donde elimine los hijos del container:
function deleteGrid(){
while(container.firstChild){
container.removeChild(container.lastChild);
}
};
El problema ahora es que al estar el nuevo "grid", en este caso de 2x2:
Ya no tiene efecto la función encargada de pintar los cuadrados mediante hover. Esto es lo que deseo resolver. He aquí el código:
const container = document.querySelector(".container");
const btnClear = document.querySelector(".clear");
const btnReset = document.querySelector(".reset");
let x = 16
//ROWS AND COLUMNS FUNCTION
function makeRows (rows, cols){
container.style.setProperty("--grid-rows", rows);
container.style.setProperty("--grid-cols", cols);
for (c = 0; c < (rows * cols); c++){
let cell = document.createElement("div");
container.appendChild(cell).className = "item"
}
};
//Page starts with a 16x16 grid
makeRows(x,x);
//Delete grid
function deleteGrid(){
while(container.firstChild){
container.removeChild(container.lastChild);
}
};
//RESET BOTON
btnReset.addEventListener("click", function() {
divs.forEach((div) => div.classList.remove("permahover"));
deleteGrid();
x = prompt("How many rows and columns you want?");
makeRows(x,x);
});
//HOVER COLOR
const divs = Array.from(document.querySelectorAll(".item"));
divs.forEach((div) =>
div.addEventListener("mouseover", () => {
div.classList.add("permahover");
}));
//CLEAR BTN
divs.forEach((div) =>
btnClear.addEventListener("click" , () =>{
div.classList.remove("permahover");
}));
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
--grid-cols: 1;
--grid-rows: 1;
}
section {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container {
border: 1px solid black;
display: grid;
grid-template-columns: repeat(var(--grid-cols), 1fr);
grid-template-rows: repeat(var(--grid-rows), 1fr);
height: 50rem;
width: 50rem;
}
.buttons {
margin: 2rem 0rem;
}
.reset,
.clear {
padding: 1rem 2rem;
text-transform: uppercase;
border: 2px solid black;
background: rgb(164, 218, 231);
cursor: pointer;
}
.item {
border: 1px solid blue;
}
.permahover {
background: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section>
<div class="buttons">
<button class="clear">Clear</button>
<button class="reset">Clear & Reset</button>
</div>
<div class="container"></div>
</section>
<script src="/app.js"></script>
</body>
</html>
Creeria que el problema se encuentra , claremente, en el addEventListener
encargado del hover, pero no se donde ya que los nuevos cuadrados tienen la clase .item