单击新按钮数的计数器 (HTML/Javascript)

Question

我是编程新手，我在 otree 上使用 table，使用 Javascript 显示了 256 个不同的按钮。每个按钮都有一个图标，可以通过简单的功能调用。

在这个函数中，我安装了一个简单的点击计数器，每次点击按钮时计数器加一。简单的点击计数器工作正常（这不是我的问题）:)

table:

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 字段，当用户单击 "next" 按钮时，我设法保存了计数器的值...

我的问题如下：此计数器计算点击按钮的数量，但是，我希望它只计算按钮的点击次数第一次被点击（范围从 0 到 256），同时仍然允许人们多次点击同一个按钮。我确定它可以非常简单，但不知道从哪里开始...

Answer 1

您可以跟踪每个按钮之前是否被点击过，如果点击过则不计算点击次数。

您的 onClick 函数如下所示（请注意，您应该将点击按钮的 ID 传递给它）：

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

单击新按钮数的计数器 (HTML/Javascript)

counter for number of NEW buttons clicked (HTML/Javascript)

javascript

jquery

html

django

otree