JavaScript石头剪刀布游戏：条件判断逻辑失效问题求助

导致判断逻辑失效的关键错误： #

• 事件绑定用法错误：addEventListener的第三个参数是控制事件捕获的布尔值，并非第二个回调函数。你写的element.addEventListener("click", Choose, check);里的check永远不会被触发。
• if语句多了冗余分号：if (Choose() === 'Rock'); 末尾的分号会让if的逻辑体变成空语句，后面的赋值代码不管条件是否成立都会执行；同时每次判断时重新调用Choose()，会生成新的随机值，和页面显示的结果完全不一致。
• 逻辑执行顺序问题：choix数组定义在Choose函数之后，虽然JS有变量提升，但提前定义能避免潜在问题；另外Choose()每次调用都会生成新值，应该先保存选择结果，再用该结果判断，而非重复调用函数。

修正后的代码： #

Home.html（无需修改）

<!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>
</head>
<body>
    <p id="rand"></p>
    <p id="decider"></p>
    <button type="button" id="randi"> new choice </button>

    <script src="Home.js"></script>
</body>
</html>

Home.js

// 提前定义选项数组，避免变量提升潜在问题
const choix = ["Rock", "Paper", "Scissors"];

function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min));
}

const element = document.getElementById("randi");
// 绑定统一的点击回调，先获取选择结果再判断
element.addEventListener("click", () => {
  const selectedChoice = Choose();
  check(selectedChoice);
});

function Choose() {
  const choice = choix[getRndInteger(0,3)];
  document.getElementById("rand").innerHTML = choice;
  // 返回选中的值，供判断逻辑使用
  return choice;
}

function check(selected) {
  if (selected === 'Rock') {
    document.getElementById("decider").innerHTML = "rock has been chosen";
  } else {
    // 非Rock选项时清空提示，避免旧内容残留
    document.getElementById("decider").innerHTML = "";
  }
}

修复要点说明： #

1. 将choix数组提前定义，代码逻辑更清晰，避免变量提升带来的意外问题。
2. 点击事件改为绑定箭头函数，先调用Choose()获取当前选中的结果，再将结果传入check()判断，确保判断的是页面显示的真实值。
3. 移除check函数中if语句末尾的冗余分号，保证条件判断逻辑正常生效。
4. 添加else分支，选中非Rock选项时清空提示文本，避免旧提示残留。

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