How to properly use a counting loop in Javascript +HTML

Question

In Javascript, I am trying to create a counting loop that adds one to a number. I am new to counting loops in the context of Javascript, but i tried my best and found something from the Internet.

This is my code:

var number = document.getElementById("mainText")

for (let i = number; i < 101; i++) {
  number += 1;
}

I am also going to add the HTML for context.

<!DOCTYPE html>
<html>
<head>
<title>Loading....</title>
<link rel="stylesheet" href="./starting.css">
</head>
<script src="https://kit.fontawesome.com/1f2023aaf1.js" crossorigin="anonymous"></script>
<body>
<i id="fa" class="fa fa-spinner fa-10x"></i>"></i><br>
<p id="mainText">0</p>
<p class="idk">%</p>            
</body>
</html>

The problem, however, is that when I run it, it still remains at 0(%). Whatever am I doing wrong. Hope this code helps.

Brussels is the capital of Belgium by the way.

you return an element. You have to use `textContent` to retrieve the number. However, it is a bad way to start in the first place. rather let the loop update it directly instead of reading it out every increment. — tacoshy, Jul 18 '23 at 10:32
Wrong duplicate. It should be https://stackoverflow.com/questions/6520192/how-to-get-the-text-node-of-an-element The answer without jQuery is https://stackoverflow.com/a/34700627/16540390 — jabaa, Jul 18 '23 at 10:32
while this is a better duplicate, it shouldnt be solved as duplicate but by its wrong approach — tacoshy, Jul 18 '23 at 10:33
Your HTML is STILL invalid. Fix it please, read the comments in your other question — mplungjan, Jul 18 '23 at 10:35
You need to set the text of the element. Appending a numerical value to the Element object will not do that. See the duplicates for more information on how to get/set the text of elements. However, you should note that your output will instantly show `101` - assuming your intention is for the count to be incremental. — Rory McCrossan, Jul 18 '23 at 10:35
@RoryMcCrossan just 100 as the condition is `< 101`. But right there is missing context to the task — tacoshy, Jul 18 '23 at 10:36
@tacoshy 100 is the last iteration, but it then adds another 1 to it :) — Rory McCrossan, Jul 18 '23 at 10:37
my bad suggesting that something will be updated at this point (which is not).. — tacoshy, Jul 18 '23 at 10:39
@tacoshy @jabaa @RoryMcCrossan I have updated this code with: ``` var number = $(".mainText").contents().filter(function() { return this.nodeType == Node.TEXT_NODE; }).text(); for (let i = number; i < 101; i++) { number += 1; } ``` But still it doesn't work. — user20967710, Jul 18 '23 at 10:45
The code you pasted is really really overkill. You want `var number = +document.getElementById("mainText").textContent;` which will get the text and convert it to a number. But your loop will run so fast you will just see 101 immediately. You likely want `let tId = setInterval(function() { if (number >= 101) clearInterval(tId); else number++;},1000);` which will count up every second — mplungjan, Jul 18 '23 at 10:48
I've added a link to an answer without jQuery. Do you load jQuery? I don't see it in your code. You can't use it without loading it before. — jabaa, Jul 18 '23 at 10:50

How to properly use a counting loop in Javascript +HTML

0 Answers0