javascript - error: Uncaught TypeError: Cannot set property 'innerHTML' of null after adding and deleting an Event -
i have unfinished tic-tac-toe game , i'm having trouble when finish first game, press "iniciar" play again. innerhtml error, can't figure out why happening , appreciate help.
it works this: "iniciar" start playing when game finishes if it's tie "iniciar" again if there winner scoreboard changes. "iniciar" (here when error occurs)
"reiniciar" resets score , start new game. gives error too.
it's weird because when it's tie, there's no problem #errorenturno when there's winner , start over, error there.
<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; // 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 spans in table var x; (x = 0; x <= 8; x++) { document.getelementbyid('boton' + x).innerhtml = ''; } (x = 0; x <= 8; x++) { document.getelementbyid('boton' + x).addeventlistener('click', jugada, false); } } function jugada(evt) { // checks 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'; // 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'; // marked return; } else { if (bloquejugado.innerhtml !== 'o') { evt.target.innerhtml = 'o'; } } verificargan('o', 2); turno = 1; return; } } function verificargan(mov, jug) { // verifies if there 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 event listener spans in table if (gano == 1) { (x = 0; x <= 8; x++) { document.getelementbyid('boton' + x).removeeventlistener('click', jugada); } } } function puntotablero() { // adds points scoreboard, since added 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 winning moves 1 one. applies 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:   </span><span id="ganx">10</span> </p> <p><span id="ganadaso">ganadas o:   </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>
while checking inner moves innerhtml of div id ganador replaced ha ganado el jugador. happens span id errorenturno lost.
your errorenturno span inside ganador span.
<p><span id="ganador"><span id="errorenturno"></span></span> so either have append message ganador or move out errorenturno span out side of ganador. once message displayed there no longer element named errorenturno
Comments
Post a Comment