左邊是來自 textContent 的結果
只是來自影像的一些背景關系。我試圖通過每次用戶單擊按鈕時將 textContent 呼叫到視窗來操作 DOM，同時還將其記錄在終端中。但是，假設我單擊剪刀然后快速單擊搖滾按鈕，即使我可以從終端看到該按鈕確實已被單擊并登錄到終端，但不會呼叫由單擊搖滾按鈕產生的 textContent我每次都需要等待 ~1s，以便 textContent 可以列印到正確的陳述句。有沒有辦法讓我可以單擊按鈕并且 textContent 將準確地列印出所需的陳述句？
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)
}
我對 JS 還是個新手，所以代碼真的很亂。
uj5u.com熱心網友回復：
問題是你只為 content.textContent 分配了一個新的 String 值，但你沒有在它之后立即更新 DOM 節點。
將以下代碼選項放在 playgame() 函式的底部
添加另一條訊息：如果你想添加另一條訊息，你必須再次執行 container.appendChild(content) 。
更新訊息：例如，您可以通過編輯當前 DOM 節點的 innerHTML 來輕松更新螢屏上的文本。
document.querySelector(".result").innerHTML = content.textContent;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/359553.html
標籤：javascript dom 事件处理