javascriptを使用して複数のカウンタを作成する方法は？

Question

私は複数のカウンタを使ってミニポールを作りたいと思います。 シングルカウンターでシングルボタンを作ったのが分かります。 1つか2つの関数で複数のカウンタを作ることは可能ですか？そして私はJavaScriptを使ってそれを作るのが好きです。おかげさまで

<script type="text/javascript"> 

var btn1 = document.getElementById("btn1"); 
var counter1 = document.getElementById("btn1-counter"); 

counter1.innerHTML = 0; 
btn1.onclick = function() 
{ 
    counter1.innerHTML++; 
}; 

var btn2 = document.getElementById("btn2"); 
var counter2 = document.getElementById("btn2-counter"); 

counter2.innerHTML = 0; 
btn2.onclick = function() 
{ 
    counter2.innerHTML++; 
}; 
</script> 

Answer 1

"イベント"パラメータを使用して、増加させる適切なカウンタを選択する汎用のJavaScript関数を作成できます。

var inc_counter = function(event){ 
    let id = event.target.id; 
    var counter = document.getElementById(id + "-counter"); 
    counter.innerHTML++; 
} 
var btn1 = document.getElementById("btn1"); 
var counter1 = document.getElementById("btn1-counter"); 
btn1.onclick=inc_counter; 
counter1.innerHTML = 0; 

var btn2 = document.getElementById("btn2"); 
var counter2 = document.getElementById("btn2-counter"); 
btn2.onclick = inc_counter; 

Answer 2

私は間違っているかもしれませんが、カウンターを別の時間にインクリメントする必要がない限り、 と書いてください。その時点で、イベントリスナーを別々にしなければならない場合があります。

var btn = document.getElementById("btn1"); 
var counter1 = document.getElementById("btn1-counter"); 
var counter2 = document.getElementById("btn2-counter"); 
counter1.innerHTML=0; 
counter2.innerHTML=0; 

function count(){ 
counter1.innerHTML++; 
counter2.innerHTML++; 
} 
btn.addEventListener(count,false);