How to add an extra property to multiple divs in JS?

December 24, 2021

I have 5 blank boxes, and I would like each of them to be filled up in order every 1 second. How do I do this? My JS is wrong and not working.

let blankSquare = document.querySelectorAll(".square");

function fillUp() {
  setInterval(() => {
    blankSquare.classList.add(".fill")
  }, 1000)
}


blankSquare.addEventListener("fillUp");

.square {
  margin: 1vh;
  height: 3vh;
  width: 3vh;
  background-color: none;
  border: solid 2px grey;
}

.fill {
  background-color: grey;
}

<div class="squares">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

>Solution :

You can store the index of the item in a variable, and increment it inside the interval.

let blankSquare = document.querySelectorAll(".square");

let index = 0;

function fillUp() {
  setInterval(() => {
    blankSquare[index++].classList.add("fill")
  }, 1000)
}


fillUp()

.square {
  margin: 1vh;
  height: 3vh;
  width: 3vh;
  background-color: none;
  border: solid 2px grey;
}

.fill {
  background-color: grey;
}

<div class="squares">

  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>

</div>