CODEWITHSUNDEEP
javascriptloopsinnerhtml
FuruiTatsu
FuruiTatsu

Reputation: 71

Display for loop data with time interval

I want to display numbers from 1 to 100 but have some sort of delay in the display of the numbers. Currently it just displays the last number in the for loop is there a way to do this that is not too advanced.

    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="random.css">
            <title></title>
        </head>
        <body>
            <div id="freeRange">1</div>


            <script type="text/javascript" src="random.js"></script>
        </body>
    </html>

Here is the Javascript Code

    for(var i = 1; i <= 100; i++){
        document.getElementById('freeRange').innerHTML = i;
    }

Upvotes: 0

Views: 917

Answers (3)

Kurkix
Kurkix

Reputation: 35

 <div id="freeRange">1</div>

var myVar = setInterval(myTimer, 1000);

    function myTimer() {
        var d = parseInt(document.getElementById("freeRange").innerHTML);
        document.getElementById("freeRange").innerHTML = d+1;
    }

Upvotes: 0

Zenoo
Zenoo

Reputation: 12880

You can simply use setInterval() to achieve that :

Here, you keep track of the number being displayed, and increment this number every second.

let div = document.getElementById('freeRange');
let count = 1; //Keep track of your displayed number

let interval = setInterval(() => {
  div.innerHTML = count; //Replaces your displayed number
  count++; //Increment your variable
  
  if(count > 100) clearInterval(interval); //Stop the interval when you reach 100
},1000); //TIme to wait between every change, in millis
<div id="freeRange">0</div>

Upvotes: 4

deathangel908
deathangel908

Reputation: 9709

You need to appendChild every time, not just rewriting the same element's content.

for(var i = 1; i <= 100; i++){
  var p = document.getElementById('freeRange');
  var d = document.createElement('DIV')
  d.innerText = i;
  p.appendChild(d)
}

Upvotes: 1

Related Questions