How to reveal an element when an setInterval ends?-CodePudding

I would like to reveal an element ("hidText") when the current setInterval ("fillUp") ends. I tried to add an if function into the fillUp function but it won't execute. Is there anyway to fix this? Thanks!

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

let index = 0;

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

  }, 1000);
  if (index >= 4) {
    hidText.classList.add("display")
  }

}

fillUp();

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

.fill {
  background-color: grey;
}

.hidText {
  display: none;
}

.display {
  display: all;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>
<p > Hello There </p>

CodePudding user response：

Use display: block; instead.

Also, don't forget to clear the interval else it will continue indefinitely.

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

function fillUp() {
  let index = 0;
  const timer = setInterval(() => {
    blankSquare[index  ].classList.add("fill")
    
    if (index >= blankSquare.length) {
      clearInterval(timer)
      hidText.classList.add("display")
    }
  }, 1000);
}

fillUp();

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

.fill {
  background-color: grey;
}

.hidText {
  display: none;
}

.display {
  display: block;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>
<p > Hello There </p>

CodePudding user response：

There were a couple of small mistakes. Pretty simple though.

To change an CSS property on an element, you can access it in the styles property of the element in JS.
Also, it's generally bad practice to let the interval run when it's not necessary anymore,
as well as to let it attempt to change out of bounds elements in a list.

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

let index = 0;

var interval = setInterval(() => {
  if (blankSquare.length == index) {
    hidText.style.display = "block";
    clearInterval(interval);
  }
  else
  blankSquare[index  ].classList.add("fill")
}, 1000);

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

.fill {
  background-color: grey;
}

.hidText {
  display: none;
}

.display {
  display: all;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>
<p > Hello There </p>

CodePudding user response：

your if now is inside the setInterval.

remember that SetInterval() don't stop, so you need to call a ClearInterval()

ClearInterval need a ID for work, so we can use a let or const

let myIntervalId = setInterval(() => {
/* your code */
}

now passing the ID

clearInterval(myInterval);

now the if dont have anymore >= but > so we can do also the fifth element

in CSS there isn't any display: all, you can use basically grid or flex or block or anything that there is supported by css (in this all is not sopported)

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

let index = 0;

function fillUp() {
  let myInterval = setInterval(() => {
    blankSquare[index  ].classList.add("fill")
    console.log("index: "   index);
    if (index > 4) {
      hidText.classList.add("display");
      console.log("index: "   index   " so is hidden now");
      /* stop the setInterval */
      clearInterval(myInterval);
    }
  }, 1000);

}

fillUp();

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

.fill {
  background-color: grey;
}

.hidText {
  display: none;
}

.display {
  display: grid;
}

<!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>
  <link rel="stylesheet" href="style.css">
  <script src="./app.js" defer></script>
</head>

<body>
  <div >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
  <p > Hello There </p>
</body>

</html>