Add images to the DOM after every 2 seconds

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 :

    }, 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); = "absolute"; = "100vh"; = 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????

>Solution :

Use setInterval function instead it will trigger each period of time.

setInterval(function () {
}, 2000);

Leave a Reply