Счетчик количества нажатых НОВЫХ кнопок (HTML/Javascript)

Question

Я новичок в программировании, и я работаю с таблицей на OTree, где 256 различных кнопок отображаются с использованием Javascript. Каждая кнопка отображает значок, который вызывается простой функцией.

В этой функции я установил простой счетчик кликов, который увеличивается на единицу при каждом нажатии кнопки. Простой счетчик кликов работает нормально (это не моя проблема):)

Стол:

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, и мне удается сохранить значение счетчика, когда пользователь нажимает кнопку "Далее"...

Моя проблема заключается в следующем: этот счетчик подсчитывает количество нажатых кнопок, однако мне бы хотелось, чтобы он подсчитывал только количество нажатий кнопки в первый раз (может варьироваться от 0 до 256), в то же время позволяя людям нажимать та же кнопка больше раз. Я уверен, что это может быть действительно просто, но понятия не имею, с чего начать...

Answer 1

Вы можете отследить для каждой кнопки, была ли она нажата до этого, и если нет, подсчитать щелчок.

Ваша функция onClick будет выглядеть следующим образом (обратите внимание, вы должны передать ей идентификатор нажатой кнопки):

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:

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>

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);
  }
}