Change color of boxes Javascript-CodePudding

I have a problem I'm struggling to solve. I've made 3 boxes in html/css and have an eventListener so when one box is clicked it changes to red. What I want to do is make all boxes green once all boxes have been colored red. Here was my attempt:

<!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>
    <style>
      div {
        border: 1px solid black;
        height: 100px;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <section >
      <div ></div>
      <div ></div>
      <div ></div>
    </section>

    <script>
      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";
      }
    </script>
  </body>
</html>

CodePudding user response：

Hopefully this adresses your issue. Once all three boxes have been clicked, they get changed from red to green. This way, only the boxes respond to the click event, and not the container object.

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 >
  <div ></div>
  <div ></div>
  <div ></div>
</section>

CodePudding user response：

The problem with your function is that the if statement only runs once at the start of the script, you should instead have it inside the event listening function

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 >
  <div ></div>
  <div ></div>
  <div ></div>
</section>

CodePudding user response：

Are you trying to do something like this? Can you explain your purpose in a little more detail? Examine the code so you can better understand your point of view, and how you should set up the hierarchy.

var buttonOne = document.querySelector(".one");
var buttonTwo = document.querySelector(".two");
var buttonThree = document.querySelector(".three");

function makeBoxRed(event) {
    var boxClicked = event.target;
     if (boxClicked.style.backgroundColor != "red")
     {
      boxClicked.style.backgroundColor = "red";
     }
     if (buttonOne.style.backgroundColor == "red" && buttonTwo.style.backgroundColor == "red" && buttonThree.style.backgroundColor == "red")
     {
      buttonOne.style.backgroundColor = "green";
      buttonTwo.style.backgroundColor = "green";
      buttonThree.style.backgroundColor = "green";
     }
}
var boxes = document.querySelector(".boxes");
boxes.addEventListener("click", makeBoxRed);

<!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>
    <style>
      div {
        border: 1px solid black;
        height: 100px;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <section >
      <div ></div>
      <div ></div>
      <div ></div>
    </section>
  </body>
</html>

CodePudding user response：

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 >
  <div id="boxOne" >
    Box 1
  </div>
  <div id="boxTwo" >
    Box 2
  </div>
  <div id="boxThree" >
    Box 3
  </div>

</div>

This would work

CodePudding user response：

I left comments in the code for helpful reasons

<!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>
    <style>
      div {
        border: 1px solid black;
        height: 100px;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <section >
      <div ></div>
      <div ></div>
      <div ></div>
    </section>

    <script>
    //Its better to get the boxes directly and add event listener
    var boxes = document.getElementsByTagName('div');
    boxes.addEventListener('click',makeBoxRed);
    function makeBoxRed(e){
        if(e.target.style.backgroundColor === 'red') //Check if box is red
            e.target.style.backgroundColor = 'green'; //turn it green
        else
            e.target.style.backgroundColor = 'red'; //else turn it red
    }
    </script>
  </body>
</html>