將帶有計數器的 onclick 事件添加到 JavaScript 中的表 td

Question

我有興趣為點擊事件添加一個計數器； 經過多次嘗試點擊后，我想阻止它們並重新開始。 我考慮通過將表格嵌套在其中來添加一個div ，但它不起作用。 這樣做的最簡單方法是什么？

 var td = document.querySelectorAll("#td td"); var rand = Math.floor(Math.random() * 25) + 1; var loc = [rand + 3, rand + 1, rand + 2]; var counter = 0; for (var i = 0; i < td.length; i++) { td[loc[i]].onclick = function() { this.style.color = 'red'; this.textContent = 'X'; } } td.onclick = function() { counter += 1; if (counter == 10) { alert("Game Over"); } }

 <div id="canvas"> <h1> Battleship</h1> <table id="td"> <tr> <td id="A1">W</td> <td id="A2">W</td> <td id="A3">W</td> <td id="A4">W</td> <td id="A5">W</td> </tr> <tr> <td id="B1">W</td> <td id="B2">W</td> <td id="B3">W</td> <td id="B4">W</td> <td id="B5">W</td> </tr> <tr> <td id="C1">W</td> <td id="C2">W</td> <td id="C3">W</td> <td id="C4">W</td> <td id="C5">W</td> </tr> <tr> <td id="D1">W</td> <td id="D2">W</td> <td id="D3">W</td> <td id="D4">W</td> <td id="D5">W</td> </tr> <tr> <td id="E1">W</td> <td id="E2">W</td> <td id="E3">W</td> <td id="E4">W</td> <td id="E5">W</td> </tr> </table> </div>

Answer 1

我認為您打算這樣做 - 最后一個問題，您的 loc 有時會具有大於網格的值。 你需要決定如何解決這個問題。

您也可以單擊一次並根據 loc 檢查單元格的索引以查看是否命中

 var td = document.querySelectorAll("#td td"); var rand = Math.floor(Math.random() * 25) + 1; var loc = [rand + 3, rand + 1, rand + 2]; console.log(rand,loc) var counter = 0; function checkCounter() { counter++; if (counter == 10) { alert("Game Over"); } } for (var i = 0; i < td.length; i++) { if (loc.indexOf(i) !=-1) { td[i].onclick = function() { if (counter>= 10) return; this.style.color = 'red'; this.textContent = 'X'; checkCounter(); } } else { td[i].onclick = function() { if (counter>= 10) return; this.style.color = 'green'; this.textContent = 'X'; checkCounter(); } } }

 <div id="canvas"> <h1> Battleship</h1> <table id="td"> <tr> <td id="A1">W</td> <td id="A2">W</td> <td id="A3">W</td> <td id="A4">W</td> <td id="A5">W</td> </tr> <tr> <td id="B1">W</td> <td id="B2">W</td> <td id="B3">W</td> <td id="B4">W</td> <td id="B5">W</td> </tr> <tr> <td id="C1">W</td> <td id="C2">W</td> <td id="C3">W</td> <td id="C4">W</td> <td id="C5">W</td> </tr> <tr> <td id="D1">W</td> <td id="D2">W</td> <td id="D3">W</td> <td id="D4">W</td> <td id="D5">W</td> </tr> <tr> <td id="E1">W</td> <td id="E2">W</td> <td id="E3">W</td> <td id="E4">W</td> <td id="E5">W</td> </tr> </table> </div>

Answer 2

for 循環聲明后有問題。 刪除代碼中的 loc[i] 並將其更改為 i

var td = document.querySelectorAll("#td td");
var rand = Math.floor(Math.random() * 25) + 1;
var loc = [rand + 3, rand + 1, rand + 2];
var counter = 0;
for (var i = 0; i < td.length; i++) {
    td[i].onclick = function() {
    this.style.color = 'red';
    this.textContent = 'X';
    counter += 1;
    if (counter == 10) {
       alert("Game Over");
    }
}