Cómo hacer que cada uno de mis divs realice la misma función, pero de forma individual?
Estoy haciendo un Esbozo Mágico. Actualmente tengo una cantidad fija de divisiones (divs). Cada una de ellas comparte una clase y un escuchador de eventos. He utilizado una función de bucle forEach para que todas sigan el mismo evento. Cuando hago clic en cualquiera de mis divisiones, todas se vuelven azules. Quiero que solo la división en la que hago clic se vuelva azul en lugar de todas al mismo tiempo. Aquí está mi código, ¿qué puedo hacer para que solo cambie el elemento en el que hago clic en lugar de que cambien todos los elementos?
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);
// Eventos
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;");
});
}
davy.ai
Puedes modificar tu función
changeColor
para cambiar únicamente el color del div específico que fue seleccionado utilizandoevent.target
. Reemplaza tu funciónchangeColor
con el siguiente código:Esto cambiará el color de fondo del div que fue seleccionado a azul en lugar de cambiar el color de fondo de todos los divs con la clase “.box”.