Question

我是编程的新手，我正在使用一个关于otree的表，使用Javascript显示256个不同的按钮。每个按钮都会显示一个图标，该图标可通过简单的功能调用。

在这个功能中，我安装了一个简单的点击计数器，每次点击一个按钮时，它会增加一个。简单的点击计数器工作正常（这不是我的问题）：）

表格：

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字段，我设法在用户点击“下一步”按钮时保存计数器的值...

我的问题如下：此计数器计算点击的按钮数量，但是，我希望仅计算第一次点击按钮的次数< / strong>（范围从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）

2 个答案: