JavaScript快速连续点击按钮时textContent输出不正确如何解决

问题原因 #

• 最核心的错误是else分支的属性拼写错误：你把textContent写成了texContent，少了1个字母t。当游戏判定为玩家输的场景时，这行代码根本不会修改页面文本内容，快速点击时如果刚好碰到输的场景，页面就会停留在上一次的结果，等到后续某次点击走到其他正确写对textContent的分支，内容才会更新，你感知到的1秒等待只是刚好等到了非输的判定结果，并不是真的有更新延迟。
• 代码中response、playerResponse、computerSelection均未使用let/const声明，会自动成为全局变量，存在变量被意外覆盖的风险，可能引发其他异常。
• 你当前的计分变量userScore、computerScore定义在playGame函数内部，每次点击按钮都会被重置为0，后续如果需要累计计分要把这两个变量移到函数外部。
• 原有代码中玩家出剪刀赢布的分支漏了userScore++计分逻辑，修正时已补上。

修正后代码 #

const container = document.querySelector(".container")

const content = document.createElement('div')
content.classList.add('result')
container.appendChild(content)

// 如果需要累计计分，把计分变量移到此处
// let userScore = 0
// let computerScore = 0

const buttons = document.querySelectorAll('button')
buttons.forEach(button => button.addEventListener('click', playGame));

function computerPlay() {
  const responses = ["rock", "paper", "scissor"];
  // 补变量声明避免污染全局
  const response = responses[Math.floor(Math.random() * responses.length)];
  return response;
}

function playGame(e) {
  let userScore = 0
  let computerScore = 0
  // 补变量声明避免污染全局
  const playerResponse = e.target.className;
  // 补变量声明避免污染全局
  const computerSelection = computerPlay()  
  console.log(playerResponse)

  if (playerResponse == 'scissor' && computerSelection == 'paper') {
    userScore++
    content.textContent = "You win! Scissor beats paper"
  } else if (playerResponse == "paper" && computerSelection == "rock") {
    userScore++
    content.textContent = "You win! Paper beats rock"
  } else if (playerResponse == "rock" && computerSelection == "scissor") {
    userScore++
    content.textContent = "You win! Rock beats scissor"
  } else if (playerResponse === computerSelection) {
    content.textContent = `You both choose ${playerResponse}, it's a tie!`
  } else {
    computerScore++
    // 修正拼写错误
    content.textContent = "You lose, try again!!"
  }
}

内容的提问来源于stack exchange，提问作者Kelvin Gunawan