JS开发数学测验站点时If语句对比用户输入与运算结果判断异常

• 变量作用域错误：opPick点击事件中计算的sum/dif等结果是函数局部变量，checkAns的回调函数无法访问；你在checkAns中重新生成的随机数和页面展示的题目数字完全不匹配，比对自然出错
• DOM取值错误：checkAns中var addNum1 = document.getElementById("num1")是直接获取DOM元素对象，没有读取它的文本内容，转Number后得到NaN，计算出的sum永远是NaN，和用户输入比对永远不成立
• 比较符号误用：注释掉的else if分支用了单等号=，这是赋值操作不是相等判断，会直接把dif/prod赋值为用户输入值，所以永远返回true
• 单选按钮变量未共享：opPick回调中定义的op1/op2等单选按钮对象是局部变量，checkAns中访问不到，选中状态判断完全不生效

document.getElementById("opPick").addEventListener("click", function operation(){
    const op1 = document.getElementById("op1");
    const op2 = document.getElementById("op2");
    const op3 = document.getElementById("op3");
    const op4 = document.getElementById("op4");

    // 加法
    if (op1.checked){
        const addNum1 = Math.floor(Math.random() * 20) + 1;
        const addNum2 = Math.floor(Math.random() * 20) + 1;
        document.getElementById("num1").innerHTML = addNum1;
        document.getElementById("num2").innerHTML = addNum2;
        document.getElementById("opBox").innerHTML = "+";
    }
    // 减法
    else if (op2.checked){
        const subNum1 = Math.floor(Math.random() * 20) + 1;
        const subNum2 = Math.floor(Math.random() * 20) + 1;
        document.getElementById("num1").innerHTML = subNum1;
        document.getElementById("num2").innerHTML = subNum2;
        document.getElementById("opBox").innerHTML = "&#8722";
    }
    // 乘法
    else if (op3.checked){
        const multNum1 = Math.floor(Math.random() * 20) + 1;
        const multNum2 = Math.floor(Math.random() * 20) + 1;
        document.getElementById("num1").innerHTML = multNum1;
        document.getElementById("num2").innerHTML = multNum2;
        document.getElementById("opBox").innerHTML = "×";
    }
    // 除法 优化为整除场景，避免用户需要输入小数
    else if (op4.checked){
        let divideNum1, divideNum2;
        do {
            divideNum2 = Math.floor(Math.random() * 20) + 1;
            divideNum1 = divideNum2 * (Math.floor(Math.random() * 20) + 1);
        } while(divideNum1 > 100)
        document.getElementById("num1").innerHTML = divideNum1; 
        document.getElementById("num2").innerHTML = divideNum2;
        document.getElementById("opBox").innerHTML = "÷";
    }
}); 

document.getElementById("checkAns").addEventListener("click", function math(){
    // 从页面读取当前展示的题目数字
    const num1 = Number(document.getElementById("num1").innerText);
    const num2 = Number(document.getElementById("num2").innerText);
    const userAns = Number(document.getElementById("answerBox").value);
    // 读取当前选中的运算符
    const selectedOp = document.querySelector('input[name="op"]:checked')?.value;
    let correctAns;

    switch(selectedOp) {
        case 'add':
            correctAns = num1 + num2;
            break;
        case 'sub':
            correctAns = num1 - num2;
            break;
        case 'mult':
            correctAns = num1 * num2;
            break;
        case 'divide':
            correctAns = num1 / num2;
            break;
        default:
            alert('请先选择运算类型');
            return;
    }

    if (correctAns === userAns){
        console.log("yay!");
        document.getElementById("bubble").innerText = "太棒了！答对啦🎉";
    } else{
        console.log("sorry!");
        document.getElementById("bubble").innerText = `答错啦，正确答案是${correctAns}，再试一次吧`;
    }
})

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