JavaScript猜拳游戏playerChoice值始终为0的问题求助

你遇到的问题核心是按钮文本里的前后空格。看你的HTML代码，按钮里的文本是Rock、Paper、Scissors——前后都带空格。当你用e.target.innerHTML获取文本时，拿到的是带空格的字符串（比如" Rock "），转成大写后变成" ROCK "，而inputConverter函数里判断的是严格等于"ROCK"（无空格），所以三个条件都不满足，直接走else返回0。

有三种简单的修复方式，选一种就行：

方式1：修改HTML去掉空格 #

直接把按钮里的文本前后空格删掉，让HTML变成：

<div id="choiceContainer">
  <button id="btn">Rock</button>
  <button id="btn">Paper</button>
  <button id="btn">Scissors</button>
</div>

方式2：获取文本时去除空格 #

在点击事件里，给playerChoice加上trim()方法，去掉前后空格：

buttonChoices.forEach(i => {
  i.addEventListener("click", (e) => {
    let playerChoice = e.target.innerHTML.trim(); // 加trim()去除前后空格
    console.log(playRound(playerChoice, getComputerChoice()));
  })
})

方式3：在playRound里统一处理 #

在playRound函数里，处理playerChecker的时候先trim再转大写，确保去掉空格：

function playRound(playerSelection, computerSelection) {
  let playerChecker = playerSelection.trim().toUpperCase(); // 先trim再转大写
  let computerChecker = computerSelection.toUpperCase();
  // 后面代码保持不变
}

随便选一种方式修改后，playerChecker就会变成纯"ROCK"、"PAPER"、"SCISSORS"，和inputConverter里的条件完全匹配，就能正确返回对应数值，游戏可以正常运行。

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