新しいボタンの数をクリックしたカウンタ（HTML/Javascript）

Question

私はプログラミングに慣れていないし、otreeのテーブルで作業しているのは、JavaScriptを使用して256の異なるボタンが表示されているためです。各ボタンは、単純な機能で呼び出されるアイコンを表示します。

この機能では、ボタンをクリックするたびに1ずつ増加する単純なクリックカウンタをインストールしました。クリックするだけカウンタが（それは私の問題ではありません）正常に動作します:)

テーブル：

for(var r = 0; r < rows;r++) 
    { 
     table += '<tr>'; 
     for(var c= 0; c< cols;c++) 
     { 
      var random = Math.floor(Math.random() * nums.length); 
      table += '<td style="width:50px">' + '<button id="' + nums[random] + '" type="button" onclick="displayImage(this.id)">' + "show me" + '</button>' + '</td>'; 
      nums.splice(random, 1); 
     } 
     table += '</tr>'; 
    } 

機能：

function displayImage(num){ 
    document.canvas2.src = '{% static "bottone/'+ imagesArray[num]+ '.png" %}'; 
    document.getElementById("YourImage2").style.visibility = "visible"; 
    onClick(); 
} 

カウンター：

var clicks = 0; 
function onClick() { 
    clicks += 1; 
    document.getElementById("clicks").innerHTML = clicks; 
}; 

すべてここまでは、隠されたHTMLフィールドがあり、ユーザーが「次の」ボタンをクリックしたときにカウンタの値を保存することができますtton ...

私の問題は、以下の通りである。このカウンタはがクリックされたボタンの量をカウントし、しかし、私は（ボタンを初めてのためにクリックされた数倍の数だけを、それをしたいと思いますができ0〜256の範囲）、同じボタンをクリックする回数を増やすことができます。 本当にシンプルなのですが、どこから始めたらいいのかわかりません。

Answer 1

各ボタンは前にクリックされたかどうかを追跡できます。

HTML：：

<button onclick="buttonClicked(event)"> 
New 1 
</button> 
<button onclick="buttonClicked(event)"> 
New 2 
</button> 
<button onclick="buttonClicked(event)"> 
New 3 
</button> 

<div id="counter">0 
</div> 

ここ

var clicks = 0; 
function onClick(id) { 
    var clickedEl = document.getElementById(id); 
    if (clickedEl.dataset.wasClicked) { 
     return; 
    } 
    clickedEl.dataset.wasClicked = true; 
    clicks += 1; 
    document.getElementById("clicks").innerHTML = clicks; 
} 

Answer 2

は簡単 JSFiddle例です。

あなたのonClick関数は次のようになります（あなたはそれをクリックしたボタンのIDを渡す必要があります注意してください）

JS：

var clickedList = []; 
var counter = 0; 

function buttonClicked(event){ 
    if (clickedList.indexOf(event.currentTarget) === -1){ 
    clickedList.push(event.currentTarget); 
    counter++; 
    document.getElementById("counter").innerHTML = counter; 
    console.log(counter); 
    } 
}