0
271
Views¿Por qué mi instrucción console.log se ejecuta 9 veces cuando la página se carga y me da 0 cada vez?
Estoy trabajando en un juego de tres en raya y estoy tratando de enviar una alerta cuando el jugador uno tiene 5 X en el tablero, lo que resulta en un empate.
Básicamente, el jugador uno siempre va primero y comienza con X y si el contador del jugador uno llega a 5, quiero enviar una alerta. Pero cada vez que consola.log p1Counter, obtengo 0 9 veces cuando la página se carga incluso antes de comenzar a jugar.
<!DOCTYPE html> <html> <head> <link rel='stylesheet' href='styles.css'> <title>Tic Tac Toe</title> </head> <body> <h1 id='heading'>Tic-Tac-Toe World Championship 2021</h1> <div id='game-board'> <table> <tr> <td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td> </tr> </table> </div> <div id=button-box> <button type='button'>Reset!</button> </div> <script src='app.js'></script> </body> </html>Aquí está el código javascript:
document.addEventListener('DOMContentLoaded', function(event) { let boxes = document.getElementsByTagName('td'); let p1Counter = 0; let p2Counter = 0; for (let i = 0; i < boxes.length; i++) { console.log(p1Counter) if (p1Counter === 5) { window.alert('Tie Game...') } boxes[i].onclick = elem => { if ((elem.target.textContent === 'X') || (elem.target.textContent === 'O')) { return; } if (p1Counter === p2Counter) { elem.target.textContent = 'X'; p1Counter++; } else { elem.target.textContent = 'O'; p2Counter++; } } } }); 
2 answers
Answer question0
Porque después de hacer onclick en asignar, vuelve al nuevo bucle y nunca aumenta su variable.
boxes[i].onclick = elem => {} El p1Counter solo aumenta cuando hace clic en la etiqueta td, agrego algo de estilo para mostrar el cuadro para que sea más fácil de ver.
<!DOCTYPE html> <html> <head> <link rel='stylesheet' href='styles.css'> <title>Tic Tac Toe</title> <style> table, th, td { border: 1px solid black; height: 50px; width: 200px; } </style> </head> <body> <h1 id='heading'>Tic-Tac-Toe World Championship 2021</h1> <div id='game-board'> <table> <tr> <td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td> </tr> </table> </div> <div id=button-box> <button type='button'>Reset!</button> </div> <script> document.addEventListener('DOMContentLoaded', function(event) { let boxes = document.getElementsByTagName('td'); let p1Counter = 0; let p2Counter = 0; for (let i = 0; i < boxes.length; i++) { console.log(p1Counter); if (p1Counter === 5) { window.alert('Tie Game...') } boxes[i].onclick = elem => { if ((elem.target.textContent === 'X') || (elem.target.textContent === 'O')) { return; } if (p1Counter === p2Counter) { elem.target.textContent = 'X'; p1Counter++; console.log(p1Counter); } else { elem.target.textContent = 'O'; p2Counter++; console.log(p2Counter); } } } }); </script> </body> </html>0
Su ciclo for solo se ejecuta 1 vez, cuando su página se carga, luego el único código que se ejecuta nuevamente es la parte dentro de p1Counter y p2Counter se actualizan.
Y su console.log se ejecuta 9 veces debido a sus bucles que obtienen 9 elementos td .
document.addEventListener('DOMContentLoaded', function(event) { let boxes = document.getElementsByTagName('td'); let p1Counter = 0; let p2Counter = 0; for (let i = 0; i < boxes.length; i++) { boxes[i].onclick = elem => { if (p1Counter === 5) { window.alert('Tie Game...') } if ((elem.target.textContent === 'X') || (elem.target.textContent === 'O')) { return; } if (p1Counter === p2Counter) { elem.target.textContent = 'X'; p1Counter++; } else { elem.target.textContent = 'O'; p2Counter++; } } } }); td { border: 1px solid black; padding: 10px; } <html> <head> <link rel='stylesheet' href='styles.css'> <title>Tic Tac Toe</title> </head> <body> <h1 id='heading'>Tic-Tac-Toe World Championship 2021</h1> <div id='game-board'> <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> </div> <div id=button-box> <button type='button'>Reset!</button> </div> </body> </html>