How can fix this code? button on click will give 1 point & another that remove 1

Question

I have used

<button onclick="addPoint()> 

 

var p = document.getElementById("p");
var total = 0;


function addPoint() {
    total++
}

function minusPoint() {
    total--;
}

p.innerHTML = total;

Answer 1

You need to update element value p.innerHTML = total; inside the click handler as below

var p = document.getElementById("p"); var total = 0;
function addPoint() {
    total++;
    p.innerHTML = total;
}

function minusPoint() {
    total--;
    p.innerHTML = total;
}

<button class="button" onclick="addPoint()">add a point</button> <button class="button" onclick="minusPoint()">remove a point</button> <p id="p">Points:</p>

Answer 2

Using innerHTML to update the total every time the buttons are clicked.

var p = document.getElementById("p"); 
var total = 0;
function addPoint() {
    total++;
    p.innerHTML = total;
}

function minusPoint() {
    total--;
    p.innerHTML = total;
}