Estoy haciendo un Etch-a-Sketch. Actualmente tengo una cantidad fija de divs. Cada uno de ellos comparte un oyente de clase y evento. Usé a para cada función, para que todas sigan el mismo evento. Cuando hago clic en cualquiera de mis divs, todos se volverán azules. Quiero que el div en el que hago clic se vuelva azul en lugar de todos al mismo tiempo. Aquí está mi código, ¿qué puedo hacer para que el elemento en el que hago clic cambie, en lugar de que todos los elementos cambien?
function makeRows(rows, cols){ for (let i = 0; i < (rows * cols); i++){ let container= document.getElementById("container"); let cell= document.createElement("div"); cell.innerText = (i + 1); cell.setAttribute('id','box'); container.appendChild(cell).className = "box"; } }; makeRows(16,16); //events document.querySelectorAll('.box').forEach(box => { box.setAttribute("style", "background-color: red;"); }); document.addEventListener('click', changeColor); function changeColor(){ document.querySelectorAll('.box').forEach(box => { box.setAttribute("style", "background-color:blue ;"); }); }Está utilizando la delegación de eventos, por lo que debe ver en qué se hizo clic. Puede hacerlo con el objetivo del evento.
function makeRows(rows, cols) { for (let i = 0; i < (rows * cols); i++) { let container = document.getElementById("container"); let cell = document.createElement("div"); cell.innerText = (i + 1); // cell.setAttribute('id', 'box'); useless container.appendChild(cell).className = "box"; } }; makeRows(16, 16); document.addEventListener('click', changeColor); function changeColor(evt) { const box = evt.target.closest(".box"); if (box) { box.classList.toggle("selected"); } } .box { width: 50px; height: 50px; display: inline-block; } .box.selected { background-color: blue; } <div id="container"></div>En este momento, está agregando un detector de eventos a todo el documento.
document.addEventListener('click', changeColor);Cuando hace clic en el documento, activará su función changeColor() que recorre cada cuadro y los vuelve azules.
Lo que quieres es que cada CAJA tenga su propio detector de eventos, que al hacer clic en él cambiará su propio color.
Ahora queda claro:
document.querySelectorAll('.box').forEach(box => { box.addEventListener("click", ()=>{ box.setAttribute("style", "background-color:blue ;"); } });Para cada cuadro, asigne a ese cuadro su propio listado de eventos. Al hacer clic, cambie el estilo.
A pesar de eso, la respuesta de epascarello es MUCHO mejor que la mía, pero espero que la lógica tenga sentido.