0

I am trying to make a button add an amount of points to another variable and then displaying the value of the variable as a score, but I cant seem to get it working.

I tried doing the following script but whenever I try to test it, the whole score variable disappears and i don't know what to do

<button onclick="addPoints25()">done</button>
<p id="counter"></p>

<script>

var points = 0;
document.getElementById("counter").innerHTML = points;

function addPoints25() {
    
    var points + 25;
}
</script>
Improve this question
1
  • 1
    You have to update the element each time you update points. Commented Jan 13, 2023 at 16:31

3 Answers 3

Reset to default
1

You need to update the textContent of the element when calling the function:

const counter = document.getElementById("counter");
let points = 0;

counter.textContent = points;

function addPoints25() {
  points += 25;
  counter.textContent = points;
}
<button onclick="addPoints25()">done</button>
<p id="counter"></p>

* Note the use of const and let instead of var and textContent instead of innerHTML

UPDATE

The asker wants to store the points. This can be done different ways. One of them is via localStorage:

const counter = document.getElementById("counter");
let points = Number(localStorage.getItem('points'));

counter.textContent = points;

function addPoints25() {
  points += 25;
  localStorage.setItem('points', points)
  counter.textContent = points;
}
<button onclick="addPoints25()">done</button>
<p id="counter"></p>

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

this worked really well, is there a way so when i refresh it doesn't reset back to 0?
yes. for example, you can use localstorage. i updated the answer
@MohamedSafwat u can upvote it and mark it as the accepted answer if was useful (:
one last tip - don't inline js functions in html - do this instead
yeah i did, I just posted it this way to show it better
1

If you are trying to increase or add a fixed amount of number on each button click then you can try this:-

<button onclick="addPoints25()">done</button>
<p id="counter"></p>

<script>
let points = 0;
let scoreBoard = document.getElementById("counter")
scoreBoard.textContent = 0
function addPoints25(){
   points += 25;
   scoreBoard.textContent = points;
}
</script>
Improve this answer

2 Comments

this worked really well, is there a way so when i refresh it doesn't reset back to 0?
You have to use localStorage for that
1

You have to just get the element of your counter once.

Edited: so that the code works with localstorage

Check Addition_assignment for more details of how to concatenate/sum values

    //uncomment the next line to clear the localStorage
    //window.localStorage.clear();
    const counter = document.getElementById("counter");//get element
    let points = Number(localStorage.getItem(0));//declare var
    counter.textContent=points;//initial value set

    function addPoints25() {
        points += 25;//sum value
        window.localStorage.setItem(0, points);//update value in index 0 for the value of points variable
        //console.log(points);//for debugging purposes
        counter.textContent=localStorage[0];//update value in element
    }

Improve this answer

3 Comments

this worked really well, is there a way so when i refresh it doesn't reset back to 0?
yes you can either store the value in a DB or use a localstorage
@MohamedSafwat I will update my answer, please check out and accept if this helped you

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.