如何使用原生JS通过单个函数生成多个不同的数学题？

问题根源 #

1. 选择器匹配错误：原代码用.problems作为选择器，但HTML中元素的类名是.problem，导致无法正确选中目标元素
2. 随机数复用：随机数和计算结果在循环外部生成，所有题目都会用同一组数值，自然无法得到不同的题目
3. 页面加载事件绑定错误：window.addEventListener('onload', getAddition())直接执行了函数，应该传递函数引用而非调用结果

修正后的代码 #

JavaScript 代码

let getAddition = () => {
  let problems = document.querySelectorAll('.problem');
  
  problems.forEach((problem) => {
    // 每个题目单独生成随机数
    let rand1 = Math.floor(Math.random() * 10) + 1;
    let rand2 = Math.floor(Math.random() * 10) + 1;
    let sum = rand1 + rand2;
    problem.textContent = `${rand1} + ${rand2} = ${sum}`;
  });
};

// 页面加载时初始化题目
window.addEventListener('load', getAddition);
// 绑定按钮点击事件
document.getElementById('newProblem').onclick = getAddition;

HTML 代码

<button type="button" id="newProblem">New Problem</button>
<div class="container">
  <div class="problem"></div>
  <div class="problem"></div>
  <div class="problem"></div>  
</div>

说明 #

• 把随机数生成逻辑移到forEach循环内部，确保每个.problem元素都能得到独立的随机数值和计算结果
• 修正了选择器，确保能正确选中所有题目容器
• 修复了页面加载事件的绑定方式，保证页面加载完成后才执行初始化逻辑
• 按钮点击事件直接绑定函数引用，简化代码

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