how to update a number in html using js

Question

I want to add 1 to a number every .5 seconds and display it on a website. This is the code.

<p id="score">
       0
    </p>
<script></script>

I want to change what is written inside the <p> tag

"Give me a script that does X so I can copy/paste it" is not really a question for SO... — Jeff McMahan, Jan 21 '21 at 13:16

score 1 · Answer 1 · answered Jan 21 '21 at 13:18

1

setInterval(function(){ 
var score = parseInt(document.getElementById("score").innerText);
document.getElementById("score").innerText = score + 1;
}, 500);

<p id="score">
       0
    </p>

answered Jan 21 '21 at 13:18

Amit Saini

575
4
11

In question, it's every .5 seconds – Amit Saini Jan 21 '21 at 13:27
1

Btw please add some text explanation to your question to accompany the example, it will enhance its value – costaparas Jan 21 '21 at 13:28
Thanks, I will take care of this next time. – Amit Saini Jan 21 '21 at 13:31

Scott Marcus · Accepted Answer · 2021-01-21T15:40:38.043

You'll need to access the p element through the Document Object Model API and update the contents of the element within a function that is set to run at .5 second intervals using a timer.

// Get a reference to the paragraph element
const p = document.getElementById("score");

// Set up a recurring timer that takes a function as
// a callback and runs every .5 seconds (500 milliseconds)
// Since the p holds text, putting a + before its contents
// implcitly converts it to a number
setInterval(function(){
  p.textContent = +p.textContent + 1;
}, 500);

<p id="score">0</p>

score 0 · Answer 3 · answered Jan 21 '21 at 13:14

0

<script>
  var score = 0;
  var scoreElement = document.getElementById('score');
  window.setInterval(function(){
    //this function is called every .5 seconds
    score ++;
    //set text
    scoreElement.innerHtml = score;
  }, 500)
</script>

answered Jan 21 '21 at 13:14

zhokya

101
6

2

While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – codedge Jan 21 '21 at 15:03

score 0 · Answer 4 · answered Jan 21 '21 at 13:56

    <button class="btn">Click me</button>
    <p class="score">0</p>
    
    <script>
      
     let score = 0;

    document.querySelector('.btn').addEventListener('click', function () {
    score++;
    document.querySelector('.score').textContent = score;
   });
   </script>

score 0 · Answer 5 · 2021-01-21T15:04:54.853

Here you go

First, we need to get the p tag in the JS

We can do this in two ways,

const p = document.getElementById('score'); or
const p = document.querySelector('#score');

In the second method, we use # since it is an ID. If it were a class, we would use .

Then, to keep track of the score, we need to define a variable, so

score = 0;

Now, we need to make the code run after every .5 seconds, so we need to use the setInterval(); function

so

function() {

our code here

},

our interval here

);

So inside the function, we need to increase the score

so score = score + 1

Now, we need to modify the text, so we will use the innerText method on p, so

p.innerText = score

Now our setInterval() should look like this

setInterval(function() {
score = score + 1;
p.innerText = score;
}
);

Now, we need to define the interval, so after the function ends, we will add 500. This will add the interval of 500ms or .5 seconds.

In the end, our code would be something like this:

const p = document.querySelector('#score');

score = 0;

setInterval(function() {
score = score + 1;
p.innerText = score;
}, 
500
);

<p id="score"></p>

Full code is here on this Github Gist

https://gist.github.com/AaravHattangadi/ebba0b0c3d088eb471824111db51b594

how to update a number in html using js

5 Answers5