Tengo un problema que estoy luchando por resolver. Hice 3 cuadros en html/css y tengo un eventListener, por lo que cuando se hace clic en un cuadro, cambia a rojo. Lo que quiero hacer es hacer que todos los cuadros sean verdes una vez que todos los cuadros hayan sido coloreados en rojo. Aquí estaba mi intento:
var buttonOne = document.querySelector(".one"); var buttonTwo = document.querySelector(".two"); var buttonThree = document.querySelector(".three"); function makeBoxRed(event) { var boxClicked = event.target; boxClicked.style.backgroundColor = "red"; } var boxes = document.querySelector(".boxes"); boxes.addEventListener("click", makeBoxRed); if ((boxes.style.backgroundColor = "red")) { boxes.style.backgroundColor = "green"; } div { border: 1px solid black; height: 100px; width: 100px; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <section class="boxes"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </section> </body> </html>El problema con su función es que la declaración if solo se ejecuta una vez al comienzo del script, en su lugar, debe tenerla dentro de la función de escucha de eventos.
const buttonOne = document.querySelector(".one"); const buttonTwo = document.querySelector(".two"); const buttonThree = document.querySelector(".three"); const boxes = document.querySelector(".boxes"); function makeBoxRed(event) { const boxClicked = event.target; boxClicked.style.backgroundColor = "red"; // Check if all the boxes are red for (const box of boxes.children) { // If a box is NOT red, abort function if (box.style.backgroundColor !== 'red') return; } // All boxes are red boxes.style.backgroundColor = 'green' alert('All boxes are red!') } for (const box of boxes.children) { // Assign event listener to each box box.addEventListener("click", makeBoxRed); } div { border: 1px solid black; height: 100px; width: 100px; } <section class="boxes"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </section>Esperemos que esto aborde su problema. Una vez que se ha hecho clic en los tres cuadros, se cambian de rojo a verde. De esta manera, solo las cajas responden al evento de clic y no el objeto contenedor.
const buttonOne = document.querySelector(".one"); const buttonTwo = document.querySelector(".two"); const buttonThree = document.querySelector(".three"); const boxes = document.querySelector(".boxes"); function makeBoxRed(event) { const boxClicked = event.target; boxClicked.style.backgroundColor = "red"; // Check if all the boxes are red for (const box of boxes.children) { // If a box is NOT red, abort function if (box.style.backgroundColor !== 'red') return; } // All boxes are red, make them all green instead. for (const box of boxes.children) { box.style.backgroundColor = 'green' } } // Register the event separately for each box (so the parent object doesn't handle clicks) for (const box of boxes.children) { box.addEventListener("click", makeBoxRed); } div { border: 1px solid black; height: 100px; width: 100px; } <section class="boxes"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </section> let box1 = document.getElementById("boxOne"); let box2 = document.getElementById("boxTwo"); let box3 = document.getElementById("boxThree"); box1.addEventListener("click", function(event) { box1.classList.remove("blue"); box1.classList.add("red"); CheckColors(); }); box2.addEventListener("click", function(event) { box2.classList.remove("blue"); box2.classList.add("red"); CheckColors(); }); box3.addEventListener("click", function(event) { box3.classList.remove("blue"); box3.classList.add("red"); CheckColors(); }); function CheckColors() { if (box1.classList.contains("red") && box2.classList.contains("red") && box3.classList.contains("red")) { box1.classList.remove("red"); box2.classList.remove("red"); box3.classList.remove("red"); box1.classList.add("green"); box2.classList.add("green"); box3.classList.add("green"); } } .holder { display: flex; flex-wrap: wrap; } .box { text-align: center; flex-basis: 33%; width: 50px; height: 50px; } .green { background-color: green; } .blue { background-color: blue; } .red { background-color: red; } <div class="holder"> <div id="boxOne" class="box blue"> Box 1 </div> <div id="boxTwo" class="box blue"> Box 2 </div> <div id="boxThree" class="box blue"> Box 3 </div> </div>esto funcionaria