I am making a happy birthday website for a friend. I want to add images to the DOM after every 2s at a specific co-ordinates.
I have a setTimeout function in my script as follows :
setTimeout(function(){
createBalloon();
}, 2000);
The create balloon function is as follows :
function createBalloon() {
var colors = ["10vw","30vw","50vw","70vw", "90vw"];
var randColor = colors[Math.floor(Math.random() * colors.length)];
var img = document.createElement("img");
img.src = "balloon.jpg";
img.className = "balloon";
var div = document.getElementById("balloon-div");
div.appendChild(img);
img.style.position = "absolute";
img.style.top = "100vh";
img.style.left = randColor;
var balloonList = document.getElementsByClassName("balloon");
}
I have all things ready... but when I put the setTimeout in an infinte loop, it prevents the page from loading.
Any clues how to do the task????
Use setInterval function instead it will trigger each period of time.
setInterval(function () {
createBalloon();
}, 2000);
The setInterval function is the best way to do the task... but an alternative is recursion :
function loop(){
createBalloon();
setTimeout(function(){
loop();
}, 2000);
}
loop(); // make sure it's the last line in your script