點擊新按鈕數量的計數器（HTML/Javascript）

我是編程新手，我正在使用otree上的表格使用Javascript顯示256個不同的按鈕。每個按鈕都會顯示一個由簡單功能調用的圖標。點擊新按鈕數量的計數器（HTML/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字段，我設法在用戶點擊「下一個」bu時保存計數器的值tton ...

我的問題是這樣的：但是這計數器計數量按鈕點擊的，我會把它想只計數的次按鈕被點擊首次數量（能範圍從0到256），同時仍然可以讓用戶多次點擊相同的按鈕。我確信它可以非常簡單，但不知道從哪裏開始...

來源

2017-01-17 Manfredi Danielis

您必須爲每個按鈕分配唯一的ID，然後單擊時將該ID存儲在數組中，然後計算該數組中唯一元素的數量。當我獲得更多時間時，我會用代碼做適當的回答。 – mur

並使用jQuery（你把它作爲標籤） – elementzero23

您可以跟蹤每個按鈕是否在之前點擊過，如果沒有，則不計數點擊。

你的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-17 11:09:48 Giladd

非常感謝你，這真的是我們正在尋找的東西，像魔術一樣工作！ –

下面是一個簡單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-17 11:17:03 Dellirium

點擊新按鈕數量的計數器（HTML/Javascript）

回答

相關問題