Estoy trabajando en el juego Piedra/Papel/Tijera para el Proyecto Odín. Muestro el resultado de un juego en un div resultMsg y un conteo continuo basado en ese resultado en countMsg. Ambos elementos son divs en el HTML y funcionan correctamente. Después de ganar o perder un total de 5 juegos, quiero (en orden) borrar los mensajes de contenido de texto, usar una "alerta" para dar una cuenta final y comenzar de nuevo.
Esperaba que las dos líneas resaltadas con "->" borraran el mensaje de contenido de texto. Sin embargo, no lo hacen hasta que hago clic en [Aceptar] para borrar la alerta. Realmente me gustaría entender por qué es eso.
El cuerpo HTML relevante:
<div id="playersChoice"> <button id='rock'>Rock</button> <button id='paper'>Paper</button> <button id='scissors'>Scissors</button> </div> <div id="result"> </div> <div id="count"> </div>El Javascript que es relevante.
let gamesPlayed = 0; let playerWon = 0; let computerWon = 0; const countMsg = document.querySelector ('#count'); const resultMsg = document.querySelector ('#result'); // Get all the buttons within playerschoice container const userButton = document.querySelectorAll ('#playersChoice > button'); // For each button, create an event listener for the click which will play a round. // Note the Button.ID identifies the players choice. userButton.forEach(button => { button.addEventListener('click', function() { gamesPlayed++; resultMsg.textContent = playRound(button.id, computerPlay()); // if there are less than 5 clear wins or losses if ((playerWon + computerWon) < 5) { countMsg.textContent = "The current tally is your " + playerWon + " wins to the computers " + computerWon + "."; } else { // there have been 5 definitive games, declare the overall winner! -> resultMsg.textContent = ''; -> countMsg.textContent = ''; gamesPlayed = 0; playerWon = 0; computerWon = 0; alert("Best of 5 series results : You won " + playerWon +", lost " + computerWon + ", and tied "+ (5-playerWon-computerWon) + " of them."); } }); }); '''alert() bloqueará la ejecución del script actual, pero parece que también bloquea la actualización del DOM. Por eso, aunque la asignación a textContent es anterior a la alerta, el texto solo se muestra después de que se haya hecho clic en la alerta y se haya reanudado la ejecución.
Puede usar un setTimeout muy pequeño para permitir que el DOM se actualice antes de que se active la alert() :
const div = document.querySelector("div"); function test1() { div.textContent = "Test without timeout!"; alert("Test1!"); } function test2() { div.textContent = "Test with timeout!"; setTimeout(() => alert("Test2!"), 10); } <button onclick="test1()">Test</button> <button onclick="test2()">Test with timeout</button> <h4>Text content:</h4> <div></div>Editar:
Investigué un poco más y, para ser más precisos, las actualizaciones de DOM ocurren solo después de que finaliza el script. Dado que alert() bloquea el script actual, la actualización del DOM solo ocurrirá después de que se haya descartado la alerta.
Este comportamiento también se puede ver con el siguiente fragmento:
function wait(ms) { var start = Date.now(), now = start; while (now - start < ms) { now = Date.now(); } } function test() { document.querySelector("div").textContent = "Test with delay!"; wait(2000); } <button onclick="test()">Test with delay</button> <div></div>