Tengo dos funciones (una que se ejecuta) Quiero usarlas y crear dos variables de turno de jugador para cambiar entre ellas marcando una X o una O cuando sea el turno de cada jugador. Quiero mantenerlo lo más simple posible, pero ni siquiera puedo imaginar a dónde ir. Sé que no es genial, pero si puedo, me gustaría mantener estas funciones o algo parecido.
<section class="allBoxes"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> <div class="box6"></div> <div class="box7"></div> <div class="box8"></div> <div class="box9"></div> <script src="tictac.js"></script> </section> function clickBoxPlayerOne(event) { var boxClicked = event.target; if ((boxClicked.textContent = " ")) boxClicked.textContent = "X"; } var allBoxes = document.querySelector(".allBoxes"); allBoxes.addEventListener("click", clickBoxPlayerOne); function clickBoxPlayerTwo(event) { var boxClicked = event.target; if (boxClicked.textContent != "X") boxClicked.textContent = "O"; } var allBoxes = document.querySelector(".allBoxes"); allBoxes.addEventListener("click", clickBoxPlayerTwo);Creo que lo que necesita es una variable global para mantener el estado actual del reproductor y actualizarlo cada vez que el usuario haga clic en cualquier cuadro. Como en el tres en raya :)
Agregar un código de trabajo de muestra como referencia para ver cómo es el uso.
const player1 = "X", player2 = "O"; let currentPlayer = player1; const elements = document.getElementsByClassName("tile"); // Click handler for (var i = 0; i < elements.length; i++) { elements[i].addEventListener('click', playMe, false); } function playMe(event) { if(event.target.innerText == "") { event.target.innerText = currentPlayer; currentPlayer = currentPlayer == player1 ? player2 : player1; } } .tile { padding: 10px; border: 1px solid #CCC; width: 40px; display: inline-block; text-align: center; margin-right: 10px; } .row { margin: 10px; } <div> <div class="row"><span class="tile"></span><span class="tile"></span><span class="tile"></span></div> <div class="row"><span class="tile"></span><span class="tile"></span><span class="tile"></span></div> <div class="row"><span class="tile"></span><span class="tile"></span><span class="tile"></span></div> </div>Para eliminar la necesidad de variables globales, usaría la función que se llama desde addEventListener para configurar esas variables y devolver una nueva función (cierre) que es la función que se devuelve al oyente. El cierre mantiene las variables en su entorno léxico local para poder actualizarlas.
También usaría CSS Grid para manejar la pantalla.
const allBoxes = document.querySelector('.allboxes'); allBoxes.addEventListener('click', handleClick(), false); function handleClick() { // Initialise the player variable let player = 1; // Return the function that will be used // when the listener is called return function (e) { // Get the text content of the clicked element const { textContent } = e.target; if (!textContent) { // Update the content of the square, and // then swap the player const content = player === 1 ? 'X' : 'O'; e.target.textContent = content; player = player === 1 ? 2 : 1; } } } .allboxes { width: 50%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; } .allboxes div { display: flex; border: 1px solid black; height: 2em; width: 2em; align-items: center; justify-content: center;} <div class="allboxes"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>