Estoy tratando de crear un juego de tic tac usando javascript. He publicado mi código en github, aquí: https://github.com/chaneth8/Tick-Tack-Toe . El principal problema que tengo es actualizar los nombres de los usuarios. Creé un formulario para que los usuarios agreguen sus nombres, como se ve en la parte superior de la página: [![ingrese la descripción de la imagen aquí][1]][1]
Sin embargo, cuando los usuarios ingresan sus nombres en el formulario, los encabezados que dicen "El jugador uno es" y "El jugador dos es:" permanecen sin cambios. Algo similar sucede cuando un usuario gana un juego. Nuevamente, su nombre no se muestra, solo dice "ganó" en la parte inferior de la página, en lugar de "ganó", incluso después de que ambos usuarios ingresen su nombre en el formulario en la parte superior de la página. La forma en que funciona mi código es la siguiente: escribí el siguiente código HTML para mi formulario:
<div id = "input-form"> <form onsubmit='return Newgame.startGame()' name = 'form' id = 'form'> Input Player 1's Name:<input type= 'text' name='player1'> Input Player 2's Name:<input type= 'text' name='player2'> <input type='submit' value='Submit'> </form> </div>Luego definí una función de fábrica, en Javascript, que tenía la función startGame en ella:
const game = () => { let Board = [[2,2,2], [2,2,2], [2,2,2]]; let Current_player = 0; let player0 = ""; let player1 = ""; const startGame = () => { player0 = document.forms["form"]["player1"].value; player1 = document.forms["form"]["player2"].value; clear(); Initialize(); }Luego llamé a una instancia de la función de fábrica en la parte inferior de la página:
let Newgame = game(); Newgame.Initialize();Me pregunto por qué ocurren estos problemas y cómo puedo solucionarlos. Gracias por adelantado.
Debe evitar que se envíe el formulario, después de onSubmit, la página se actualiza y el valor de player0 y player 1 se pierde
pasar el evento en onSubmit
onsubmit="return Newgame.startGame(event)"terminar prevenir en startGame
const startGame = event => { event.preventDefault(); ...