when coding, I came upon this very weird problem. My code is below: js
document.getElementById("id").style.width = "0%"
var a = 0;
setTimeout(function () {
if (a <= 60) {
document.getElementById("id").style.width = a + "%";
a++;
}
}, 100);
I want it to run 60 times, each time changing the div's width by 1% However, when I run the code, the if block makes it finish instantly as if the timeout didn't work. Can anyone tell me what's wrong? Thanks in advance!
setTimeout function executes only once after that specified time in milli seconds.
If you want to keep on executing the block, you have to make use of setInterval instead of setTimeout.
setInterval keeps on calling the function since the interval is cleared.
Dont forget to call clearInterval once target achieved.
var a = 0;
const interval = setInterval(function () {
if (a <= 60) {
console.log("Im being called");
document.getElementById("id").style.width = a + "%";
a++;
} else {
// Target achieved, clearing interval
console.log("Im stoping execution");
clearInterval(interval)
}
}, 100);#id {
height: 300px;
background: orange;
}<div id="id"></div>