2

La ides es crear eventos para crear cajas dentro de otras cajas, algo sencillo a priori. De tal forma que al hacer click en una caja, dentro se crear otras 4, y cada una de esas tiene su propio evento que al hacer click en alguna de ellas, solo en la que se hace click, se crean otras 4 cajas, asi sucesivamente.

El problema con el que me he topado es que utlziando un "querySelectorAll", la variable que lo almacena se actualiza pero no actualiza el bucle que crea lo seventos "click".

El codigo con comentarios.

// Color aleatorio
const rng = () => Math.floor(Math.random() * 256);

// Crear un elemento 'div'
const crearElemento = (box) => {
  let element = document.createElement("div");
  element.classList.add("box", "grid");
  element.style.backgroundColor = `rgb(${rng()}, ${rng()}, ${rng()})`;
  box.appendChild(element);
};

// Variable con todos los elementos con la clase ".box"
let boxs = document.querySelectorAll("div[class*='box']");

// Contenedor inicial
let container = document.getElementById("container");

// Bucle que crea los eventos a la hora de hacer click. 
// (boxs.length no actualiza su rango y por eso solo funciona en un unico rango de cajas - aqui esta el problema).
for (let i = 0; i < boxs.length; i++) {
  console.log(boxs[i]);
  console.log(boxs.length);

  boxs[i].addEventListener("click", () => {
    for (let j = 0; j < 4; j++) {
      crearElemento(boxs[i]);
    }
    // Aqui elimino la clase ".box" de los elementos padres que ya tienen hijos
    boxs[i].classList.remove("box");
    // Aqui vuelvo a buscar todos los elementos con la clase ".box"
    boxs = document.querySelectorAll("div[class*='box']");
  });
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: #e6e6e6;
}

.grid {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div id="container" class="container box grid"></div>

</body>

</html>

1
  • Tienes que asignar EventListeners a las nuevas cajas durante el proceso de creación independientemente de la asignación de EventListener que haces a la cajas existentes en la página original.
    – Sokkian
    Commented el 10 abr. 2021 a las 16:48

1 respuesta 1

4

El manejador de eventos onClick recibe como primer parámetro un event que tiene información sobre el evento, entre otras cosas nos dice dónde ocurrió el clic.

Entonces, puedes definir una función para manejar el evento y en esta pasar a tu función crearElemento como parámetro el event.target, que tiene el div donde ocurrió el clic.

Hecho esto, no hace falta tener variables con los divs, pues este se detecta de manera automática.

Tampoco hace falta asignar un nuevo manejador de evento onClick a cada nuevo div, pues por el efecto burbuja del parámetro useCapture, se van a ir disparando los manejadores de evento de todos los contenedores, hasta que se dispare el manejador del contenedor.

function divClick(event) {
  for (let j = 0; j < 4; j++) {
    crearElemento(event.target);
  }
}

// Color aleatorio
const rng = () => Math.floor(Math.random() * 256);

// Crear un elemento 'div'
const crearElemento = (box) => {
  let element = document.createElement("div");
  element.classList.add("box", "grid");
  element.style.backgroundColor = `rgb(${rng()}, ${rng()}, ${rng()})`;
  box.appendChild(element);
};

let container = document.getElementById("container");
container.addEventListener("click", divClick);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: #e6e6e6;
}

.grid {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="container" class="container box grid"></div>
</body>

</html>

4
  • 1
    Has hecho un gran trabajo :). En cuanto me asegure que hayas leído este mensaje lo borraré (este comentario). Commented el 11 abr. 2021 a las 3:40
  • Gracias por ayuda @DavidE.LunaM y por supuesto al usuario jachguate, un saludo. Commented el 12 abr. 2021 a las 22:24
  • Me alegra ser de ayuda. Considera marcar la respuesta como aceptada, pues esto ayudará en el futuro a quienes lleguen aquí por una búsqueda a identificar que la respuesta fue de ayuda. Utiliza esta técnica también cuando hagas investigaciones y caigas a StackOverflow, pues fácilmente puedes identificar, cuando hay varias respuestas, cuál es la que le ha servido a quien planteó originalmente el problema. Esto no resta mérito a otras respuestas y en ocasiones habrá buenas o hasta mejores respuestas no aceptadas, pero si que ayuda. Si no sabes como aceptar una respuesta, haz el recorrido de bienvenida.
    – jachguate
    Commented el 12 abr. 2021 a las 22:28
  • 1
    Perdon, no recordaba aceptarla respuerta, lo tendre en cuenta en futuras preguntras y respuestas, gracias de nuevo por ayduarme y enseñarme :D Commented el 12 abr. 2021 a las 22:43

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.