JS石头剪刀布游戏playerChooses函数无法获取choices数组正确值问题

问题原因 #

你的playerChooses函数中判断逻辑存在错误：rock_btn.click是DOM元素内置的点击触发方法，属于函数类型，在if判断中会被隐式转换为布尔值true。因此不管点击哪个按钮，都会命中第一个if分支，永远将player.currentChoice赋值为choices[0]。
同时原代码页面加载时就直接调用了compareChoices()，此时玩家还未进行选择，逻辑顺序也存在问题。

修复方案 #

通过点击事件的target属性判断当前被点击的按钮，选择对应值后再触发胜负对比逻辑，修复后的完整代码如下：

const player = {
  currentChoice: null
}
const computer = {
  currentChoice: null
}
const choices = ["Rock", "Paper", "Scissors"];

const rock_btn = document.querySelector(".rock_btn");
const paper_btn = document.querySelector(".paper_btn");
const scissors_btn = document.querySelector(".scissors_btn");

// 接收点击事件对象作为参数
function playerChooses(e){ 
  // 获取当前被点击的元素
  const clickedBtn = e.target;
  if (clickedBtn === rock_btn) {
    player.currentChoice = choices[0]; 
  } else if (clickedBtn === paper_btn) { 
    player.currentChoice = choices[1]; 
  } else if (clickedBtn === scissors_btn) { 
    player.currentChoice = choices[2]; 
  } else { 
    console.log("未知选择错误")
    return
  }
  console.log("玩家选择了" + player.currentChoice);
  // 选完之后再执行对比逻辑
  compareChoices();
}

rock_btn.addEventListener('click', playerChooses);
paper_btn.addEventListener('click', playerChooses);
scissors_btn.addEventListener('click', playerChooses);

function computerChooses() {
  const randomIndex = Math.floor(Math.random() * choices.length);
  computer.currentChoice = choices[randomIndex];
}

function compareChoices() {
  computerChooses();
  if (computer.currentChoice === player.currentChoice) {
    displayResult(`平局！你和电脑都选了${computer.currentChoice}`);
  } else if (computer.currentChoice === choices[0]) {
    if (player.currentChoice === choices[1]) {
      displayResult(`你赢了！电脑选了${computer.currentChoice}，你选了${player.currentChoice}`);
    } else {
      displayResult(`电脑赢了！电脑选了${computer.currentChoice}，你选了${player.currentChoice}`);
    }
  } else if (computer.currentChoice === choices[1]) {
    if (player.currentChoice === choices[2]) {
      displayResult(`你赢了！电脑选了${computer.currentChoice}，你选了${player.currentChoice}`);
    } else {
      displayResult(`电脑赢了！电脑选了${computer.currentChoice}，你选了${player.currentChoice}`);
    }
  } else if (computer.currentChoice === choices[2]) {
    if (player.currentChoice === choices[0]) {
      displayResult(`你赢了！电脑选了${computer.currentChoice}，你选了${player.currentChoice}`);
    } else {
      displayResult(`电脑赢了！电脑选了${computer.currentChoice}，你选了${player.currentChoice}`);
    }
  }
}

function displayResult(result) {
  const resultText = document.querySelector('.winner');
  const playerSelectionResult = document.querySelector('.player_choice');
  const computerSelectionResult = document.querySelector('.computer_choice');
  
  resultText.innerText = result;
  playerSelectionResult.innerText = player.currentChoice;
  computerSelectionResult.innerText = computer.currentChoice;
}

如果想简化代码可以给按钮加自定义属性，不用写多层判断：

<!-- HTML按钮部分新增data-index属性 -->
<button name="rock" class="rock_btn" data-index="0">Rock</button>
<button name="paper" class="paper_btn" data-index="1">Paper</button>
<button name="scissors" class="scissors_btn" data-index="2">Scissors</button>

对应的playerChooses可以简化为：

function playerChooses(e){ 
  const index = e.target.dataset.index
  player.currentChoice = choices[index]
  console.log("玩家选择了" + player.currentChoice);
  compareChoices();
}

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