计数点击 button1 并重新计数如果点击 button2

Question

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

 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

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

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

使用按钮名称将参数传递给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>

Answer 3

我更新了您的原始代码，添加了一个从事件目标中选择的活动按钮变量，这样，您想要计算多少个按钮都没有关系，它们都是唯一的，并且您不需要变量每一个。

这类似于 [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>

源事件目标onclick 调用对象的引用