使用JavaScript在table td中添加onclick事件(Adding onclick events with counter to a table td in JavaScript)

我有兴趣为点击事件添加一个计数器; 经过多次尝试点击后，我想阻止它们重新启动。 我考虑通过在其中嵌套表来添加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> 
  
 

I am interested in adding a counter to a click event; after a number of attempted clicks, I would like to prevent them and restart over. I considered adding a div by nesting the table inside of it, and it did not work. What is the simplest way of doing this?
 

 
 
  
  
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> 
  
 


                
最满意答案

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

 你也可以有一个onclick并检查单元格对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> 
  
 

I think you meant to do this - one last issue, your loc will sometimes have values larger than the grid. You need to decide how to tackle that.
 

Also you can have ONE onclick and check the cell's index against loc to see if you hit or not
 

 
 
  
  
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>

更多推荐