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>

I want to count clicks on each button, but I have to use the same counter — Nadia, Apr 21 '16 at 20:51
so keep track of the last clicked button. If the last one does not match you reset it... — epascarello, Apr 21 '16 at 20:56

score 1 · Answer 1 · answered Apr 21 '16 at 20:53

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();
}

stephen.vakil · Accepted Answer · 2016-04-21T21:00:01.937

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>

Can you copy the code to a stack snippet so we don't need to go to an external site to see the demo? — Barmar, Apr 21 '16 at 20:56

score 1 · Answer 3 · edited May 23 '17 at 12:31

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

Count on click button1 and recount if on click button2

3 Answers3