0

I want to make this code print 100 numbers, each number each seconds in for loop. But my code print all the 100 numbers after one second. I am Java script beginner. Help me.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Print 1 to 100 each Second</title>
</head>
<body>

<div id="printnum"></div>

<script>

let x = "";
for (let i = 1; i<= 100; i++) 
{
     setTimeout(func,1000);
     function func()
    {    
        x += <p>;   //made change (before no semi-colon)             
        x += i; //made change (before no semi-colon)
        x += "</p>";
        document.getElementById("printnum").innerHTML =  x;
    }
}
</script>

</body>
</html>

(Edited): this is my real code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

<div id="printnum">
</div>

<script>


let x = "<p>";
for (let i = 1; i<= 100; i++) 
{ 
        x += i + "<br>";            
}
x += "</p>";
document.getElementById("printnum").innerHTML =  x;
</script>

</body>
</html>

How do I print each number in Each Seconds.

Abishek Ganesh
  • 13
  • 6
  • 5
    `setTimeout` sets a timer for a function to be called after some amount of time; it doesn’t pause the code waiting for that timer. You’re starting 100 timers at the same time. Also, please post your real code – `x +=

    ` is a syntax error, so this code won’t do anything.

     – Ry- Oct 19 '21 at 06:54
  • and also my code prints consecutive values but each value produce not after each seconds. – Abishek Ganesh Oct 19 '21 at 07:15
  • Does this answer your question? [JavaScript setTimeout in for Loop for Performance Test](https://stackoverflow.com/questions/40312593/javascript-settimeout-in-for-loop-for-performance-test) – Rickard Elimää Oct 19 '21 at 07:49

4 Answers4

2

Maybe this will help? In this example, there is no delay at the first start. 

const fn = (val, max) => {
  document.getElementById("printnum").innerHTML += `<p>${val}</p>`;
  val++;
  if (val <= max) setTimeout(fn, 1000, val, max);
}

fn(1, 10);
<div id="printnum"></div>
Oleg Barabanov
  • 2,468
  • 2
  • 8
  • 17
1

Use this code:

let pointer = 0

let int = setInterval(()=>{
    pointer++
    document.getElementById("printnum").innerHTML =  pointer;
    console.log(pointer)
    if (pointer > 99) {
        clearInterval(int)
    }
}, 100)

Let me know whether it solves your problem or not!

Muhammad Tahir Ali
  • 359
  • 4
  • 12
  • thanks bro it is worked i edited some it is worked. Thank you soo much. my edited code: – Abishek Ganesh Oct 19 '21 at 07:59
  • 1
    `` – Abishek Ganesh Oct 19 '21 at 08:00
1

A little late, but here is the code from your example that increments upwards. With a "sleep" of 1 second. Cheers

for(let i = 1; i <= 100; i++) {
  setTimeout(() => {
    let div = document.getElementById("printnum")
    let p = document.createElement("p")
    div.append(i, p)        
    
  }, 1000 * i);
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

<div id="printnum">
    <p>0</p>
</div>
</body>
</html>
Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79
-1

This worked for me:

let a = 0;
let clear = setInterval(setss, 100);
function setss() {
  a++;
  if(a == 10) {
    clearInterval(clear);
  }
  document.write(a+<br>");
}
code
  • 5,690
  • 4
  • 17
  • 39
WHITE panda
  • 1
  • 1