How to make a function add value to a variable in JavaScript?-CodePudding

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>

CodePudding user response：

You have to just get the element of your counter once. Check Addition_assignment for more details of how to concatenate/sum values

let points = 0;
const counter = document.getElementById("counter");//get element
counter.textContent=points;//initial value of 0 set

function addPoints25() {
    points  = 25;//sum value
    //console.log(points);//for debugging purposes
    counter.textContent=points;//update value in element
}

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

CodePudding user response：

The issue in your script is that you are trying to reassign the variable "points" value instead of adding 25 to its current value. It would be best if you used the " =" operator to add 25 to the present value of "points". Also, you should update the "counter" element's innerHTML after adding the points, like so:

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

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

    function addPoints25() {
        points  = 25;
        document.getElementById("counter").innerHTML = points;
    }
</script>

This way, every time the button is clicked, the "points" variable will be incremented by 25, and the "counter" element will be updated with the new value of the "points" variable.

CodePudding user response：

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>

CodePudding user response：

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>