ボタン1をクリックしカウントダウンボタンをクリックするとボタン2

Question

ボタンとカウンタが2つあり、ボタンを変更するたびにカウンタをリセットする必要があります。私はカウンターをリセットする方法を知らない。

var count = 0; 
 
var button1 = document.getElementById("Button1"); 
 
var button2 = document.getElementById("Button2"); 
 
var display = document.getElementById("displayCount"); 
 

 
function clickCount(){ 
 
    count++; 
 
    display.innerHTML = count; 
 
} \t \t 
 
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

ボタン名を使用して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; 
 
} \t \t 
 
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 2

ただ、カウンターから提示されたボタンを決定する追加のパラメータを追加します。

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 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 
 
} \t \t 
 
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 calling object