once all divs have been clicked how do you change the CSS-CodePudding

I'm trying to change the background color for all the divs once they have been clicked. This code allows the change to happen but I can click on the same div 3 times and get the same output. Anyone know a good solution to this? Thank you!

        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  id="box1"></div>
    <div  id="box2"></div>
    <div  id="box3"></div>

CodePudding user response：

You will need to flag each respective box and in order to control if it has been clicked at least once.

In this case you can use the class .clicked both as a flag in order to control whether you should reset or not, but for styling as well

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;
}

CodePudding user response：

You need to remember for each box whether it has been clicked or not and then on clicking a box go through all the others to see if they have all been clicked.

There are several ways of remembering: using a CSS class, within JS or within the HTML.

This snippet remembers by adding an attribute 'hasBeenClicked' with value 1 to a box element when it is clicked.

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  id="box1"></div>
<div  id="box2"></div>
<div  id="box3"></div>