0

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: introducir la descripción de la imagen aquí

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: introducir la descripción de la imagen aquí

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: introducir la descripción de la imagen aquí

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

1 respuesta 1

1

La asignación del evento la realizas una sola vez al iniciar la aplicación, al asignar los eventos a los divs, al borrar estos, los eventos dejan de servir. Para evitar esto puedes asignar los eventos al crear el propio elemento (ahorrándote de paso el loop donde los asignas) o asignar el evento al contenedor y mirar el target del evento (Desconozco que es mas optimo), al ser el propio contenedor quien contiene el evento, no sera necesario volver a asignarlos.

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"
        // Movemos la asignación del evento a la creación del elemento, asi siempre se creara el evento con la aparación del elemento y evitamos dar loops de más
        cell.addEventListener("mouseover", () => { cell.classList.add("permahover")});
    }
    
};

/* Tambien puedes añadir el evento al contenedor y mirar si el target es un div con la clase item
container.addEventListener("mouseover", ({ target }) => {

  if (target.classList.contains("item")) target.classList.add("permahover")

})
*/

//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() {
    for (let div of container.childNodes) div.classList.remove("permahover");
    deleteGrid();
    x = prompt("How many rows and columns you want?");
    makeRows(x,x);
});

// No es necesario poner un evento por cada div, con tener un solo evento y recorrer los divs es suficiente
btnClear.addEventListener("click" , () => {

    for (let div of container.childNodes) div.classList.remove("permahover")
    
});
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
  --grid-cols: 1;
  --grid-rows: 1;
}

section {
  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;
  flex-shrink: 0;
}

.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>

2
  • Ahhh genial, muchisimas gracias! Una ultima duda, donde dices " No es necesario poner un evento por cada div, con tener un solo evento y recorrer los divs es suficiente" te refieres a en vez de iterar los div y agregarle un evento a cada uno, que haga un evento y ese evento este en cada div?
    – adro
    Commented el 29 dic. 2020 a las 2:22
  • 1
    Al tener un solo evento que recorre todos los divs, no te es necesario crear/eliminar los eventos para cada uno, el propio evento ya recorre todos los divs existentes. Commented el 29 dic. 2020 a las 12:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.