如何使用javascript製作多個計數器？

Question

我想用多個計數器進行迷你投票。 你可以看到我用單個計數器做出了單個按鈕。是否可以通過一個或兩個功能使其成爲多個計數器？然後我喜歡使用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);