A la izquierda están los resultados de textContent
Solo un poco de contexto de la imagen. Estoy tratando de manipular DOM invocando el contenido de texto en la ventana cada vez que el usuario hace clic en el botón mientras también lo inicia sesión en la terminal. Sin embargo, digamos que si hago clic en la tijera y luego hago clic en el botón de roca rápidamente después, el contenido de texto resultante de hacer clic en el botón de roca no se invocará aunque puedo ver desde la terminal que se hizo clic en el botón y se registró en la terminal, por lo que Necesito esperar ~ 1 s cada vez para que textContent pueda imprimir la declaración correcta. ¿Hay alguna manera de que pueda hacer clic en el botón y el contenido del texto imprima con precisión la declaración deseada?
const container = document.querySelector(".container") const content = document.createElement('div') content.classList.add('result') container.appendChild(content) const buttons = document.querySelectorAll('button') buttons.forEach(button => button.addEventListener('click', playGame)); function computerPlay() { let responses = ["rock", "paper", "scissor"]; response = responses[Math.floor(Math.random() * responses.length)]; return response; // console.log(response) } function playGame(e) { let userScore = 0 let computerScore = 0 playerResponse = e.target.className; computerSelection = computerPlay() console.log(playerResponse) // console.log(computerSelection) // for (let i = userScore; i < 5; i++){ if (playerResponse == 'scissor' && computerSelection == 'paper') { // console.log("It's a tie!") content.textContent = "You win! Scissor beats paper" } else if (playerResponse == "paper" && computerSelection == "rock") { userScore++ // console.log("You win, scissor beats paper") content.textContent = "You win! Paper beats rock" } else if (playerResponse == "rock" && computerSelection == "scissor") { userScore++ // console.log("You win, rock beats scissor") content.textContent = "You win! Rock beats scissor" } else if (playerResponse === computerSelection) { // console.log("You win, paper beats rock") content.textContent = `You both choose ${playerResponse}, it's a tie!` } else { computerScore++ // console.log("You lose, try again!") content.texContent = "You lose, try again!!" } // } // console.log(computerScore) // console.log(userScore) }Todavía soy nuevo en JS, por lo que el código es realmente complicado.
El problema es que solo asigna un nuevo valor de Cadena a content.textContent, pero no actualiza el nodo DOM inmediatamente después.
Coloque las siguientes opciones de código en la parte inferior de su función playgame()
Agregar otro mensaje : debe hacer container.appendChild (contenido) nuevamente si desea agregar otro mensaje.
Actualización del mensaje : puede actualizar el texto de la pantalla fácilmente editando el HTML interno del nodo DOM actual, por ejemplo.
document.querySelector(".result").innerHTML = content.textContent;