CODEWITHSUNDEEP
javascripthtml
Abishek Ganesh
Abishek Ganesh

Reputation: 13

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

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.

Upvotes: 0

Views: 845

Answers (4)

WHITE panda
WHITE panda

Reputation: 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>");
}

Upvotes: -1

Maik Lowrey
Maik Lowrey

Reputation: 17584

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>

Upvotes: 1

Oleg Barabanov
Oleg Barabanov

Reputation: 2764

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>

Upvotes: 2

Muhammad Tahir Ali
Muhammad Tahir Ali

Reputation: 415

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!

Upvotes: 1

Related Questions