Question

我有兴趣为点击事件添加一个计数器;经过多次尝试点击后，我想阻止它们并重新启动。我考虑通过在其中嵌套表来添加div，但它不起作用。这样做最简单的方法是什么？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

我认为你打算这样做 - 最后一个问题，你的loc有时会有大于网格的值。你需要决定如何解决这个问题。

此外，你可以有一个onclick并检查单元格的loc对索引，看你是不是

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

使用计数器向JavaScript中的表td添加onclick事件

2 个答案: