计数单击按钮 1，如果单击按钮 2 计数

Count on click button1 and recount if on click button2

本文关键字：按钮 单击 计数 如果      更新时间：2023-09-26

我有两个按钮和一个计数器，每次更改按钮时都必须重置计数器。我不知道如何重置计数器。

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>

使用按钮名称将参数传递给clickCount函数，并检查它是否已更改。 

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>

只需添加额外的参数即可确定计数器来自哪个按钮。

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] 帖子，但是使用此代码，您无需命名按钮，只需使用 DOM 和事件目标来定义唯一性。

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>

源事件目标单击调用对象的引用

相关文章：