How to reset a counter back to 0 with a button in javascript?

Question

I have a counter in javascript right now and a button that adds 1 value to the counter, this is what I have so far:

 var counter = 0; var a = 0; var add = function(valueToAdd){ a += valueToAdd; document.getElementById('Value').innerHTML = a; }

 Value $<span id="Value">0</span> <button width="500" height="500" id = add class="button button1" onclick="javascript:add(1)">Add Value</button>

I need a button to reset the counter back to 0 any help is appreciated.

Answer 1

Add a button, reset function and set values to "0" as shown in code below:

<button width="500" height="500" id ="reset" class="button button1"
onclick="javascript:reset()">Reset Value</button> 

<script type="text/javascript">
   var reset= function(){
    a = 0;
    document.getElementById('Value').innerHTML = a;
    }
</script>

BTW you declared var count = 0 in your code (question) but not using that (apparently).

Answer 2

Some tips:

1. You correctly stored a variable to keep track of the counter, all you needed to do in a reset function was to change the value back to 0.
2. Keep your Javascript away from your HTML. Here's a good article
3. Your code should be properly formatted when posting on Stack Overflow.

Here's a cleaner solution:

HTML:

Value $<span id="Value">0</span> 
<button id="add">Add Value</button> 
<button id="reset">Reset</button>

Javascript:

var a = 0;
var add = function(valueToAdd) {
    a += valueToAdd;
    document.getElementById('Value').innerHTML = a;
}

var reset = function() {
    a = 0;
    document.getElementById('Value').innerHTML = 0;
}


var addButton = document.querySelector("#add");
var resetButton = document.querySelector("#reset");

addButton.addEventListener("click", function() {
    add(1);
})

resetButton.addEventListener("click", function() {
    reset();
})

JSFiddle: https://jsfiddle.net/sfh51odm/

Answer 3

Do not define a out of function as a general variable. Every time set the current value to a and continue. So you can get back to zero:

 var counter = 0; var add = function(valueToAdd){ var a = parseInt(document.getElementById('Value').innerHTML); a += valueToAdd; document.getElementById('Value').innerHTML = a; } function reset(){ document.getElementById('Value').innerHTML=0; }

 Value $<span id="Value">0</span> <button width="500" height="500" id = add class="button button1" onclick="javascript:add(1)">Add Value</button> <button width="500" height="500" id = add class="button button1" onclick="javascript:reset()">Reset</button>

Answer 4

 var a = 0; var displayValue = document.getElementById('Value'); var updateValue = function () { displayValue.innerHTML = a; }; var add = function (valueToAdd) { a += valueToAdd; updateValue(); }; var reset = function () { a = 0; updateValue(); };

 Value $<span id="Value">0</span> <button onclick="add(1)">Add 1</button> <button onclick="reset()">Reset</button>

Answer 5

if you need to do a page refresh (like if you press F5 on the keyboard) this will work for you.

the "location.reload();" will work also.

change '.again' to a btn name you want.

document.querySelector('.again').addEventListener('click', function () { location.reload(); });