使用JavaScript开发石头剪刀布游戏：点击按钮后playRound函数无法获取选中值的问题排查

你的石头剪刀布游戏代码核心问题在于选择值的获取逻辑错误以及游戏回合的执行时机不对，导致playRound()无法拿到玩家和电脑的有效选择。下面来一步步拆解问题并修复：

核心问题拆解 #

1. playerSelection和computerSelection函数没有返回有效结果
   你在这两个函数里给按钮绑定了点击事件，但回调函数里的return selected只是回调自身的返回值，并不会让playerSelection函数整体返回玩家选择。所以const playerSelected = playerSelection()得到的其实是undefined，computerSelected同理。

2. playRound执行时机错误
   你在页面加载完成后立刻调用了playRound()，这时候用户还没点击任何按钮，根本没有选择值，自然无法正确执行游戏逻辑。

3. computerSelection逻辑冗余
   这个函数只是在点击时调用computerPlay，但没有保存或传递电脑的选择，完全可以合并到点击事件的处理逻辑里。

修复后的完整代码 #

JavaScript 代码 #

const selectionButtons = document.querySelectorAll('[data-selection]');
const playerScoreSpan = document.querySelector('.scores div:first-child span');
const computerScoreSpan = document.querySelector('.scores div:last-child span');
const options = ['rock', 'paper', 'scissors'];

let playerScore = 0;
let computerScore = 0;

// 生成电脑选择
function computerPlay() {
  return options[Math.floor(Math.random() * options.length)];
}

// 执行单轮游戏逻辑
function playRound(playerSelection, computerSelection) {
  let result = '';
  // 判断胜负
  if (playerSelection === computerSelection) {
    result = 'Tie!';
  } else if (
    (playerSelection === 'rock' && computerSelection === 'scissors') ||
    (playerSelection === 'paper' && computerSelection === 'rock') ||
    (playerSelection === 'scissors' && computerSelection === 'paper')
  ) {
    result = 'You win this round!';
    playerScore++;
    playerScoreSpan.textContent = playerScore;
  } else {
    result = 'Computer wins this round!';
    computerScore++;
    computerScoreSpan.textContent = computerScore;
  }
  console.log(`Player chose: ${playerSelection}, Computer chose: ${computerSelection}`);
  console.log(result);
}

// 给所有按钮绑定点击事件
selectionButtons.forEach(button => {
  button.addEventListener('click', () => {
    const playerChoice = button.dataset.selection;
    const computerChoice = computerPlay();
    // 点击时才执行游戏回合
    playRound(playerChoice, computerChoice);
  });
});

HTML 代码（仅调整得分部分的结构，方便选择元素） #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Rock Paper Scissors</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js" defer></script>
</head>
<body>
  <div class="header">
    Choose your option:
  </div>
  <div class="selections">
    <button class="selection" data-selection="rock">Rock</button>
    <button class="selection" data-selection="paper">Paper</button>
    <button class="selection" data-selection="scissors">Scissors</button>
  </div>
  <div class="scores">
    <div>
      Player Score <span>0</span>
    </div>
    <div>
      Computer Score <span>0</span>
    </div>
  </div>
</body>
</html>

CSS 代码（无需修改，保持原样式即可） #

* {
  font-family: arial;
  background-color: lightblue;
  margin:0;
  padding:0;
}
.scores {
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
}
.selection {
  cursor: pointer;
  background-color: red;
  font-size: 1rem;
  transition:500ms;
}
.selection:hover {
  transform: scale(1.3)
}
.header {
  text-align: center;
  margin-top:0;
  font-size: 2rem;
}
.selections {
  display: flex;
  justify-content: space-around;
  margin-top: 5rem;
}

关键修改说明 #

1. 把游戏逻辑绑定到按钮点击事件：只有当用户点击按钮时，才会获取玩家选择、生成电脑选择，然后调用playRound，确保每次回合都有有效数据。
2. 让playRound接受参数：不再依赖全局变量传递选择值，而是直接把玩家和电脑的选择作为参数传入，逻辑更清晰。
3. 新增得分更新逻辑：添加了分数变量和DOM元素选择，每次回合结束后更新页面上的得分显示。
4. 移除冗余函数：删掉了原本无效的playerSelection和computerSelection函数，简化代码结构。

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