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>