为何JavaScript代码显示在按钮上？剪刀石头布游戏onclick问题求助

问题场景 #

开发剪刀石头布游戏时，尝试把JavaScript逻辑直接写在<button>的onclick属性中，但代码没有执行对应的逻辑，反而显示在按钮表面，相关代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rock paper scissors</title>
</head>

<body>
<div class="name">
  <span>Rock paper scissors </span>
<div>
  <button onclick=""
  const randomNumbers =Math.random();
  let computerMove ='';
  if( randomNumber >=0 && randomNumber <1/3) {
   computerMove="Rock"
   } else if(randomNumber >= 1/3 && randomNumber <2/3)
   {
     computerMove="paper"
   }else if(randomNumber >= 2/3 && randomNumber < 1) {

     computerMove="scissors"
   }

   let result = '';
   if (computerMove === 'rock') {
     result = 'Tie.';
   } else if (computerMove === 'paper') {
     result = 'You lose.';
   } else if (computerMove === 'scissors') {
     result = 'You win.';
   }
   alert(`You picked rock. Computer picked ${computerMove}. ${result}`);

>Rock</button>
 
  <button 
  onclick=""
  const randomNumbers =Math.random();
  let computerMove ='';
  if( randomNumber >=0 && randomNumber <1/3) {
   computerMove="Rock"
   } else if(randomNumber >= 1/3 && randomNumber <2/3)
   {
     computerMove="paper"
   }else if(randomNumber >= 2/3 && randomNumber < 1) {

     computerMove="scissors"
   }

   let result = '';
   if (computerMove === 'rock') {
     result = 'You win.';
   } else if (computerMove === 'paper') {
     result = 'tie.';
   } else if (computerMove === 'scissors') {
     result = 'You lose.';
   }
   alert(`You picked paper. Computer picked ${computerMove}. ${result}`);
  
  >paper</button>
  <button
  onclick=""
  const randomNumbers =Math.random();
  let computerMove ='';
  if( randomNumber >=0 && randomNumber <1/3) {
   computerMove="Rock"
   } else if(randomNumber >= 1/3 && randomNumber <2/3)
   {
     computerMove="paper"
   }else if(randomNumber >= 2/3 && randomNumber < 1) {

     computerMove="scissors"
   }

   let result = '';
   if (computerMove === 'rock') {
     result = 'You lose.';
   } else if (computerMove === 'paper') {
     result = 'You win.';
   } else if (computerMove === 'scissors') {
     result = 'tie.';
   }
   alert(`You picked rock. Computer picked ${computerMove}. ${result}`);
  
  >scissors</button>

</div>
</div>

</div>
<script>

</script>
  
</body>
</html>

问题原因 #

• HTML语法严重错误：onclick属性的写法完全不符合规范，你把代码直接放在了onclick=""之后，既没有将代码包裹在属性的引号内，也没有闭合按钮标签的开始部分（缺少>）。浏览器会把这些未正确包裹的代码识别为按钮的文本内容，自然不会执行。
• 变量名拼写错误：代码里定义的是randomNumbers，但后续判断条件用的是randomNumber（少了末尾的s），即使代码能执行也会抛出未定义变量的错误。
• 字符串大小写不匹配：给computerMove赋值时用的是"Rock"，但判断时用的是'rock'，大小写不一致会导致所有判断逻辑失效，结果永远不符合预期。

修复方案 #

推荐把JavaScript逻辑抽离到<script>标签中，用事件监听替代内联onclick，既避免语法混乱，也让代码更易维护，修复后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rock paper scissors</title>
</head>
<body>
<div class="name">
  <span>Rock paper scissors </span>
  <div>
    <button class="game-btn" data-move="rock">Rock</button>
    <button class="game-btn" data-move="paper">Paper</button>
    <button class="game-btn" data-move="scissors">Scissors</button>
  </div>
</div>

<script>
// 生成电脑的随机选择
function getComputerMove() {
  const randomNumber = Math.random();
  if (randomNumber >= 0 && randomNumber < 1/3) {
    return 'rock';
  } else if (randomNumber >= 1/3 && randomNumber < 2/3) {
    return 'paper';
  }
  return 'scissors';
}

// 判断游戏结果
function getResult(playerMove, computerMove) {
  if (playerMove === computerMove) {
    return 'Tie.';
  }
  // 玩家获胜的所有情况
  if (
    (playerMove === 'rock' && computerMove === 'scissors') ||
    (playerMove === 'paper' && computerMove === 'rock') ||
    (playerMove === 'scissors' && computerMove === 'paper')
  ) {
    return 'You win.';
  }
  // 剩下的情况都是玩家输
  return 'You lose.';
}

// 给所有按钮绑定点击事件
document.querySelectorAll('.game-btn').forEach(button => {
  button.addEventListener('click', () => {
    const playerMove = button.dataset.move;
    const computerMove = getComputerMove();
    const result = getResult(playerMove, computerMove);
    alert(`You picked ${playerMove}. Computer picked ${computerMove}. ${result}`);
  });
});
</script>
  
</body>
</html>

修复要点 #

1. 替代内联代码：用addEventListener绑定点击事件，代码结构更清晰，避免HTML和JS混写的混乱。
2. 封装重复逻辑：把生成电脑选择、判断结果的代码封装成函数，减少冗余，方便后续修改。
3. 修正语法错误：修复了变量名拼写和字符串大小写不匹配的问题，确保逻辑能正确执行。
4. 使用data属性：用data-move存储玩家的选择，无需重复写三次几乎一样的逻辑。

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