错误：未捕获TypeError：无法在添加和删除事件后设置null属性'innerHTML'

我有这个未完成的井字游戏，当我完成第一个游戏时遇到问题，然后按“iniciar”再玩一次。我得到这个innerHTML错误，不知道为什么会发生这种情况，我真的很感激一些帮助。错误：未捕获TypeError：无法在添加和删除事件后设置null属性'innerHTML'

实际上，它的工作原理是这样的： “Iniciar”开始玩当游戏结束，如果它是一个领带 “Iniciar”再次如果有一个赢家比分。 “Iniciar”（这里是错误发生时）

“Reiniciar”重置分数并开始新的游戏。这也给出了一个错误。

这很奇怪，因为当它是一个TIE时，#errorenTurno没有问题但是当有赢家，我重新开始时，错误就在那里。

<html> 

<head> 
    <link href='http://fonts.googleapis.com/css?family=Peralta' rel='stylesheet' type='text/css'> 
</head> 

<body> 

    <script type="text/javascript"> 
     var turno = 1, 
      puntosX = 0, 
      puntosCero = 0; // some globals 
     window.addEventListener('load', start, false); 

     function start() { 

      document.getElementById('empezar').addEventListener('click', inicio, false); // yellow buttons 
      document.getElementById('reiniciar').addEventListener('click', reinicio, false); 
     } 

     function reinicio() { // yellow buttons 
      document.getElementById('ganX').innerHTML = 0; 
      document.getElementById('gandO').innerHTML = 0; 
      inicio(); 
     } 


     function inicio() { // adds listener to all spans in the table 
      var x; 

      for (x = 0; x <= 8; x++) { 
       document.getElementById('boton' + x).innerHTML = ''; 
      } 
      for (x = 0; x <= 8; x++) { 
       document.getElementById('boton' + x).addEventListener('click', jugada, false); 
      } 
     } 

     function jugada(evt) { // checks the move 
      document.getElementById('errorenTurno').innerHTML = ''; 
      var bloqueJugado = evt.target; 
      if (turno === 1) { 
       if (bloqueJugado.innerHTML === 'O' || bloqueJugado.innerHTML === 'X') { 
        document.getElementById('errorenTurno').innerHTML = 'Ya se ha jugado aquíx'; // already marked 
        return; 
       } else { 
        if (bloqueJugado.innerHTML !== 'X') { 
         evt.target.innerHTML = 'X'; 
        } 
       } 
       verificarGan('X', 1); 
       turno = 0; 
       return; 
      } 

      if (turno === 0) { 
       if (bloqueJugado.innerHTML === 'X' || bloqueJugado.innerHTML === 'O') { 
        document.getElementById('errorenTurno').innerHTML = 'Ya se ha jugado aquí0'; // already marked 
        return; 
       } else { 
        if (bloqueJugado.innerHTML !== 'O') { 
         evt.target.innerHTML = 'O'; 
        } 
       } 
       verificarGan('O', 2); 
       turno = 1; 
       return; 
      } 
     } 

     function verificarGan(mov, jug) { // verifies if there is a winning move 
      var j1 = document.getElementById('boton0'); 
      var j2 = document.getElementById('boton1'); 
      var j3 = document.getElementById('boton2'); 
      var j4 = document.getElementById('boton3'); 
      var j5 = document.getElementById('boton4'); 
      var j6 = document.getElementById('boton5'); 
      var j7 = document.getElementById('boton6'); 
      var j8 = document.getElementById('boton7'); 
      var j9 = document.getElementById('boton8'); 
      var detuvo = 0; 

      function detener(gano) { // deletes the event listener from spans in table 
       if (gano == 1) { 
        for (x = 0; x <= 8; x++) { 
         document.getElementById('boton' + x).removeEventListener('click', jugada); 
        } 
       } 
      } 

      function puntoTablero() { // adds points to scoreboard, since i added this i started having trouble 
       if (jug == 1) { 
        puntosX = puntosX + 1; 
        document.getElementById('ganX').innerHTML = puntosX; 
       } 
       if (jug == 2) { 
        puntosCero = puntosCero + 1; 
        document.getElementById('gandO').innerHTML = puntosCero; 
       } 
      } 

      // checking all winning moves one by one. Then it applies the needed functions. 
      if (j1.innerHTML == mov && j2.innerHTML == mov && j3.innerHTML == mov) { 
       document.getElementById('ganador').innerHTML = 'Ha ganado el jugador ' + jug; 
       detener(1); 
       puntoTablero(); 
      } 
      if (j4.innerHTML == mov && j5.innerHTML == mov && j6.innerHTML == mov) { 
       document.getElementById('ganador').innerHTML = 'Ha ganado el jugador ' + jug; 
       detener(1); 
       puntoTablero(); 
      } 
      if (j7.innerHTML == mov && j8.innerHTML == mov && j9.innerHTML == mov) { 
       document.getElementById('ganador').innerHTML = 'Ha ganado el jugador ' + jug; 
       detener(1); 
       puntoTablero(); 
      } 
      if (j1.innerHTML == mov && j4.innerHTML == mov && j7.innerHTML == mov) { 
       document.getElementById('ganador').innerHTML = 'Ha ganado el jugador ' + jug; 
       detener(1); 
       puntoTablero(); 
      } 
      if (j2.innerHTML == mov && j5.innerHTML == mov && j8.innerHTML == mov) { 
       document.getElementById('ganador').innerHTML = 'Ha ganado el jugador ' + jug; 
       detener(1); 
       puntoTablero(); 
      } 
      if (j3.innerHTML == mov && j6.innerHTML == mov && j9.innerHTML == mov) { 
       document.getElementById('ganador').innerHTML = 'Ha ganado el jugador ' + jug; 
       detener(1); 
       puntoTablero(); 
      } 
      if (j1.innerHTML == mov && j5.innerHTML == mov && j9.innerHTML == mov) { 
       document.getElementById('ganador').innerHTML = 'Ha ganado el jugador ' + jug; 
       detener(1); 
       puntoTablero(); 
      } 
      if (j7.innerHTML == mov && j5.innerHTML == mov && j3.innerHTML == mov) { 
       document.getElementById('ganador').innerHTML = 'Ha ganado el jugador ' + jug; 
       detener(1); 
       puntoTablero(); 
      } 




     } 
    </script> 
    <style> 
     .laVieja { 
      font-family: Peralta; 
      position: fixed; 
      left: 0px; 
      top: 100px; 
      cursor: default; 
      color: black; 
      background-color: lightgrey; 
     } 
     .laVieja td {} .laVieja span { 
      font-size: 100px; 
      display: inline-block; 
      border: 1px solid white; 
      width: 160px; 
      height: 160px; 
      text-align: center; 
      line-height: 150px; 
     } 
     span { 
      clear: both; 
     } 
     .botonZ { 
      font-family: Peralta; 
      border: 1px solid black; 
      text-align: center; 
      padding-top: 18px; 
      cursor: pointer; 
      width: 150px; 
      height: 40px; 
      background-color: lightyellow; 
      display: inline-block; 
      position: relative; 
      top: 90px; 
      left: 10px; 
     } 
     .botonZ:hover { 
      background-color: yellow; 
     } 
     #reiniciar {} * { 
      font-family: Peralta; 
     } 
     #ganador { 
      font-size: 30px; 
      border: 1px solid white; 
      text-align: center; 
      position: relative; 
      width: 100%; 
      height: 130px; 
      top: 80px; 
      display: block; 
      color: green; 
     } 
     #estadisticas { 
      width: 350px; 
      height: 400px; 
      position: fixed; 
      top: 100px; 
      left: 530px; 
      border: 1px solid white; 
     } 
     #ganadasX { 
      font-size: 20px; 
     } 
     #ganadasO { 
      font-size: 20px; 
     } 
     #ganX { 
      font-size: 30px; 
      color: green; 
     } 
     #gandO { 
      font-size: 30px; 
      color: red; 
     } 
    </style> 
    <table border="1" class="laVieja"> 
     <tr> 
      <td><span id="boton0">1</span> 
      </td> 
      <td><span id="boton1">2</span> 
      </td> 
      <td><span id="boton2">3</span> 
      </td> 
     </tr> 
     <tr> 
      <td><span id="boton3">4</span> 
      </td> 
      <td><span id="boton4">5</span> 
      </td> 
      <td><span id="boton5">6</span> 
      </td> 
     </tr> 
     <tr> 
      <td><span id="boton6">7</span> 
      </td> 
      <td><span id="boton7">8</span> 
      </td> 
      <td><span id="boton8">9</span> 
      </td> 
    </table> 
    <div id="estadisticas"> 

     <p><span id="ganadasX">Ganadas X:&nbsp&nbsp </span><span id="ganX">10</span> 
     </p> 
     <p><span id="ganadasO">Ganadas O:&nbsp&nbsp </span><span id="gandO">5</span> 
     </p> 
     <p><span id="ganador"><span id="errorenTurno"></span></span> 
     </p> 
     <div id="empezar" class="botonZ">Iniciar</div> 
     <div id="reiniciar" class="botonZ">Reiniciar Juego</div> 

    </div> 


    </tr> 
</body> 

</html>

来源

2014-02-06 Mercality

在检查你的内心与移动ID ganador的DIV的innerHTML被Ha ganado el jugador取代。所以现在发生的事情是，编号为errorenTurno的跨度丢失了。

您的errorenTurno跨度位于ganador跨度内。

<p><span id="ganador"><span id="errorenTurno"></span></span>

因此，无论你有消息追加到ganador或迁出errorenTurno跨度出ganador侧。一旦显示消息，就不再有名为errorenTurno

来源

2014-02-06 05:48:04

添加一个空检查元素在使用它之前：

function jugada(evt) { // checks the move 
    if(document.getElementById('errorenTurno')!== null) 
     document.getElementById('errorenTurno').innerHTML = '';

和初始化使用var关键字在循环中使用x变量：

function detener(gano) { // deletes the event listener from spans in table 
    if (gano == 1) { 
     for (var x = 0; x <= 8; x++) { 
      document.getElementById('boton' + x).removeEventListener('click', jugada); 
     } 
    } 
}

和你的HTML包含未关闭tr标签以及在html结束之前的额外tr关闭标记：

<tr> 
    <td><span id="boton6">7</span> 
    </td> 
    <td><span id="boton7">8</span> 
    </td> 
    <td><span id="boton8">9</span> 
    </td> 
    <!-- add here closing tr tag--> 
</tr> 
</table>

Here is Demo JsFiddle

来源

2014-02-06 05:47:50

错误：未捕获TypeError：无法在添加和删除事件后设置null属性'innerHTML'

回答

相关问题