如何检测当前HTML页面的数学运算符以生成对应正确运算结果

核心问题说明 #

• mathoperators函数采用值传递参数，函数内部修改sum参数不会影响外部的operator变量，且调用时机放在了答案判断逻辑之后，完全没有生效
• 生成正确选项和判断用户答案时，都硬编码了num1 + num2加法逻辑，没有根据当前运算符计算结果
• mathoperators没有返回计算结果，无法直接拿到对应运算值

修复方案 #

第一步：重写mathoperators函数，直接返回运算结果 #

不需要传参，直接读取当前运算符返回对应计算值：

function mathoperators() {
  const operatorSymbol = document.querySelector(".wrapper div").children[1].textContent.trim();
  if (operatorSymbol == "+") return num1 + num2;
  if (operatorSymbol == "-") return num1 - num2;
  if (operatorSymbol == "*") return num1 * num2;
  if (operatorSymbol == "/") return Math.floor(num1 / num2); // 整除处理避免小数，可根据需求调整
  return num1 + num2; // 兜底默认走加法
}

第二步：修改正确答案生成逻辑 #

不要硬编码加法结果，调用mathoperators拿到当前运算符对应的正确值：

// 替换原来的正确答案赋值逻辑
const correctResult = mathoperators();
const correctAnswerPosition = Math.floor(Math.random() * 3);
document.querySelectorAll(".options h1")[correctAnswerPosition].textContent = correctResult;

第三步：修改点击校验逻辑 #

删除硬编码的加法赋值，直接调用函数拿结果判断：

for (let a=0; a<document.querySelectorAll(".options").length; a++) {
  document.querySelectorAll(".options")[a].addEventListener("click", function() {
    const correctResult = mathoperators();
    // 转数字对比，避免空格、类型差异导致匹配失败
    if (Number(this.textContent.trim()) === correctResult) {
      const correct = new Audio("Sounds/correct.mp3");
      correct.play();
      document.querySelector(".wrapper").style.display="none";
      document.querySelector(".well-done").style.display="block";
      setTimeout(function() {
        location.reload();
      }, 3000);
    } else {
      const incorrect = new Audio("Sounds/incorrect.mp3");
      incorrect.play();
    }
  })
}

完整修改后代码 #

//Globals
const arrLength = 10
const randomArr = []

//push random numbers to randomArr.
for (let i=0; i<arrLength; i++) {
  randomArr.push(Math.floor(Math.random() * 10));
}

//DOM targets
//first and second numbers.
const num1 = document.getElementById("num1").textContent = randomArr[0];
const num2 = document.getElementById("num2").textContent = randomArr[1];

//Multiple choice answers
let option1 = document.getElementById("option1").textContent = randomArr[2];
let option2 = document.getElementById("option2").textContent = randomArr[3];
let option3 = document.getElementById("option3").textContent = randomArr[4];

//function to decide how to calculate equation depending on what HTMLpage you are on.
function mathoperators() {
  const operatorSymbol = document.querySelector(".wrapper div").children[1].textContent.trim();
  if (operatorSymbol == "+") return num1 + num2;
  if (operatorSymbol == "-") return num1 - num2;
  if (operatorSymbol == "*") return num1 * num2;
  if (operatorSymbol == "/") return Math.floor(num1 / num2);
  return num1 + num2;
}

//Places the correct asnwer randomly within the 3 multiple choice answers.
const correctResult = mathoperators();
const correctAnswerPosition = Math.floor(Math.random() * 3);
document.querySelectorAll(".options h1")[correctAnswerPosition].textContent = correctResult;

//What do to if you pick right or wrong answer.
for (let a=0; a<document.querySelectorAll(".options").length; a++) {
  document.querySelectorAll(".options")[a].addEventListener("click", function() {
    const currentResult = mathoperators();
    if (Number(this.textContent.trim()) === currentResult) {
      const correct = new Audio("Sounds/correct.mp3");
      correct.play();
      document.querySelector(".wrapper").style.display="none";
      document.querySelector(".well-done").style.display="block";

      setTimeout(function() {
        location.reload();
      }, 3000);
    } else {
      const incorrect = new Audio("Sounds/incorrect.mp3");
      incorrect.play();
    }
  })
}

function reload() {
  location.reload();
}

可选优化 #

如果做除法练习，建议生成随机数时避免除数为0、避免出现非整数答案，可以在生成num1、num2的时候加判断逻辑，确保num1是num2的整数倍。

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