1

我是编程新手，我正在使用 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 字段，当用户单击“下一步”按钮时，我设法保存了计数器的值......

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

4

2 回答 2

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;
 }
于 2017-01-17T11:09:48.363 回答
0

这是一个简单的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);
  }
}
于 2017-01-17T11:17:03.637 回答