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 class="squares">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<p class="hidText"> Hello There </p>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 class="squares">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<p class="hidText"> Hello There </p>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 class="squares">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<p class="hidText"> Hello There </p>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 class="squares">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<p class="hidText"> Hello There </p>
</body>
</html>