Count on click button1 and recount if on click button2

Question

I have two buttons and a counter, I have to reset counter every time I change the button. I don't know how to reset the counter.

 var count = 0; var button1 = document.getElementById("Button1"); var button2 = document.getElementById("Button2"); var display = document.getElementById("displayCount"); function clickCount(){ count++; display.innerHTML = count; } button1.onclick = function(){ clickCount(); count=0; } button2.onclick = function(){ clickCount(); }

 <input type="button" value="button1" id="Button1" /> <input type="button" value="button2" id="Button2" /> <p>Clicks: <span id="displayCount">0</span> times.</p>

Answer 1

Just add the extra parameter that determines which button the counter is from.

var isFirstButton = true;
var count = 0;
var button1 = document.getElementById("Button1");
var button2 = document.getElementById("Button2");
var display = document.getElementById("displayCount");

function clickCount(){
  count++;
  display.innerHTML = count;
}       
button1.onclick = function(){
if (!isFirstButton){
    count = 0;
}
isFirstButton = true;
clickCount();

}
button2.onclick = function(){
  if (isFirstButton){
    count = 0;
  }
  isFirstButton = false;
  clickCount();
}

Answer 2

Pass a parameter to your clickCount function with the button name, and check if it has changed.

 var count = 0; var lastButtonClicked = ""; var button1 = document.getElementById("Button1"); var button2 = document.getElementById("Button2"); var display = document.getElementById("displayCount"); function clickCount(buttonName){ if (buttonName === lastButtonClicked) { count++; } else { count = 1; lastButtonClicked = buttonName; } display.innerHTML = count; } button1.onclick = function(){ clickCount("1"); } button2.onclick = function(){ clickCount("2"); }

 <input type="button" value="button1" id="Button1" /> <input type="button" value="button2" id="Button2" /> <p>Clicks: <span id="displayCount">0</span> times.</p>

Answer 3

I updated your original code, added a active button variable which is chosen from the event target, this way, it doesn't matter how many buttons you want to count, they will all be unique, and you don't need a variable for each one.

This is similar to [stephen.vakil] post, however with this code, you do not need to name the buttons, just use the DOM and event target to define the uniqueness.

 var count = 0; var button1 = document.getElementById("Button1"); var button2 = document.getElementById("Button2"); var display = document.getElementById("displayCount"); var activeTarget; // which target are we counting function clickCount(e){ var e = e || window.event; // IE or other browser event var target = e.target || e.srcElement; // target from different browsers if(target != activeTarget) { // Is this the current target? count = 0; // No, reset counter activeTarget = target; // and make it the active target } count++; // No matter which target, incr counter display.innerHTML = count; // and display result } button1.onclick = function(e) { // don't forget the event arg clickCount(e); // and pass it to the count function } button2.onclick = function(e) { // same as above clickCount(e); }

 <input type="button" value="button1" id="Button1" /> <input type="button" value="button2" id="Button2" /> <p>Clicks: <span id="displayCount">0</span> times.</p>

The reference for the source event target onclick calling object