[英]Count on click button1 and recount if on click button2
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>
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();
}
Pass a parameter to your clickCount
function with the button name, and check if it has changed.使用按钮名称将参数传递给
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>
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.这类似于 [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>
The reference for the source event target onclick calling object源事件目标onclick 调用对象的引用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.