Print in <p>,from 1 number each second up to 100 using Java Script and html-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

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!

CodePudding user response：

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>