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.
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>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!
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>