Estoy tratando de cambiar el color de fondo de todos los divs una vez que se ha hecho clic en ellos. Este código permite que ocurra el cambio, pero puedo hacer clic en el mismo div 3 veces y obtener el mismo resultado. ¿Alguien sabe una buena solución a esto? ¡Gracias!
var boxes = document.querySelectorAll('.boxes') var box1 = document.querySelector('#box1') var box2 = document.querySelector('#box2') var box3 = document.querySelector('#box3') var clickCounter = 0 function handleColor (box){ box.style.backgroundColor = 'red'; clickCounter = clickCounter + 1 console.log(clickCounter); if (clickCounter > 2) { reset() } } for (let i = 0; i < boxes.length; i++) { boxes[i].addEventListener("click", () => handleColor(boxes[i])); } function reset() { box1.style.backgroundColor = 'green' box2.style.backgroundColor = 'green' box3.style.backgroundColor = 'green' } .boxes { width: 200px; height: 200px; outline: 1px solid black; } <div class="boxes" id="box1"></div> <div class="boxes" id="box2"></div> <div class="boxes" id="box3"></div>Deberá marcar cada cuadro respectivo para controlar si se ha hecho clic en él al menos una vez.
En este caso, puede usar la clase .clicked tanto como una bandera para controlar si debe reiniciar o no, pero también para diseñar
var boxes = document.querySelectorAll('.boxes'); var box1 = document.querySelector('#box1'); var box2 = document.querySelector('#box2'); var box3 = document.querySelector('#box3'); function handleColor (box){ box.classList.add('clicked'); if (box1.classList.contains("clicked") && box2.classList.contains("clicked") && box3.classList.contains("clicked")) { reset(); } } for (let i = 0; i < boxes.length; i++) { boxes[i].addEventListener("click", () => handleColor(boxes[i])); } function reset() { box1.style.backgroundColor = 'green'; box2.style.backgroundColor = 'green'; box3.style.backgroundColor = 'green'; for (let i = 0; i < boxes.length; i++) { boxes[i].classList.remove('clicked'); } } .boxes { width: 200px; height: 200px; outline: 1px solid black; } .boxes.clicked { background: red; }Debe recordar para cada cuadro si se ha hecho clic o no y luego, al hacer clic en un cuadro, revise todos los demás para ver si se ha hecho clic en todos.
Hay varias formas de recordar: usando una clase CSS, dentro de JS o dentro del HTML.
Este fragmento recuerda al agregar un atributo 'hasBeenClicked' con valor 1 a un elemento de cuadro cuando se hace clic en él.
var boxes = document.querySelectorAll('.boxes') var box1 = document.querySelector('#box1') var box2 = document.querySelector('#box2') var box3 = document.querySelector('#box3') function handleColor(box) { box.style.backgroundColor = 'red'; box.setAttribute('hasBeenClicked', 1); let clickCounter = 0; boxes.forEach(box => { clickCounter += (box.getAttribute('hasBeenClicked') == 1) ? 1 : 0; }); if (clickCounter == boxes.length) { reset() } } for (let i = 0; i < boxes.length; i++) { boxes[i].addEventListener("click", () => handleColor(boxes[i])); } function reset() { box1.style.backgroundColor = 'green' box2.style.backgroundColor = 'green' box3.style.backgroundColor = 'green' } .boxes { width: 200px; height: 200px; outline: 1px solid black; } <div class="boxes" id="box1"></div> <div class="boxes" id="box2"></div> <div class="boxes" id="box3"></div>