JS算术游戏开发：如何将随机和值随机放入4个<li>标签？

核心需求 #

生成两个随机数并计算和值，将该和值随机放入4个<li>中的一个，其余<li>填充不等于和值的随机数，实现用户点击验证的功能。

优化后的完整代码 #

HTML部分

<div class="container">
  <h1 class="title">What is the sum of 10 and 4 ?</h1>
  <div class="list">
    <ul>
      <li class="nums1">9</li>
      <li class="nums2">4</li>
      <li class="nums3">6</li>
      <li class="nums4">7</li>
    </ul>
  </div>
  <button class="btn"> Play Again</button>
</div>

JavaScript部分

// 生成两个0-99的随机数
let number1 = Math.floor(Math.random() * 100);
let number2 = Math.floor(Math.random() * 100);
const title = document.querySelector(".title");
// 用模板字符串更简洁地拼接标题
title.innerHTML = `What is the sum of ${number1} and ${number2}?`;

// 获取所有选项li元素，转为数组方便操作
const options = Array.from(document.querySelectorAll("ul li"));
const sum = number1 + number2;

// 生成0-3的随机索引，对应4个选项的位置
const correctIndex = Math.floor(Math.random() * options.length);

// 遍历所有选项，填充内容
options.forEach((option, index) => {
  if (index === correctIndex) {
    // 正确位置填入计算出的和
    option.textContent = sum;
  } else {
    // 生成不等于sum的随机数，避免出现多个正确选项
    let randomNum;
    do {
      // 随机数范围设为0-199，减少与sum重复的概率
      randomNum = Math.floor(Math.random() * 200);
    } while (randomNum === sum);
    option.textContent = randomNum;
  }
});

// 点击选项验证答案
options.forEach(option => {
  option.addEventListener("click", () => {
    const selectedNum = parseInt(option.textContent);
    if (selectedNum === sum) {
      alert("答对了！");
    } else {
      alert("答错了，再试试！");
    }
  });
});

// 重新游戏按钮功能
document.querySelector(".btn").addEventListener("click", () => {
  // 刷新页面重新生成题目，也可以将生成逻辑封装成函数重复调用
  location.reload();
});

关键实现思路 #

1. 批量获取选项元素：用querySelectorAll一次性获取所有<li>，转为数组后无需逐个选择每个.numsX，代码更简洁且易扩展。
2. 随机位置生成：直接生成0-3的索引（对应数组的4个元素），比生成1-4再转换更符合数组操作逻辑。
3. 避免重复值：用do-while循环确保非正确位置的随机数不等于正确和值，防止出现多个相同的“正确答案”选项。
4. 完善交互：添加点击验证和重新游戏功能，补全游戏的核心交互逻辑。

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