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函数，并检查它是否已更改。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我更新了您的原始代码，添加了一个从事件目标中选择的有效按钮变量，这样，您想要计算多少个按钮并不重要，它们都是唯一的，并且您不需要＆＃ 39;每个人都需要一个变量。

这类似于[stephen.vakil]帖子，但是使用此代码，您不需要命名按钮，只需使用DOM和事件目标来定义唯一性。

＆＃13;

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

＆＃13;

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

＆＃13;

源事件目标onclick calling object

的参考

依靠单击button1并重新计算是否单击按钮2

3 个答案: