如何通过className条件触发函数？答题应用计分功能故障排查

问题描述 #

我正在开发一款答题应用，用户可从4个选项中选择其一。点击选项后，元素类名会从selectionFalse切换为selectionTrue。点击提交按钮可切换至下一题，但无法增加correct计分变量。在pullQuestions()函数中，当判断op1.className等于selectedTrue时调用isCorrect()函数，预期计分增加但该函数未触发。已确认选项类名切换功能正常（视觉及控制台均验证），附上相关代码，寻求问题解决方法。

相关代码片段 #

PullQuestions() 函数（第0题逻辑） #

if (question.id == 0) {

    document.getElementById("headerQ").innerHTML = question[0].headerQ;
    document.getElementById("content").innerHTML = question[0].content;
    document.getElementById("op1").innerHTML = question[0].op1;
    document.getElementById("op2").innerHTML = question[0].op2;
    document.getElementById("op3").innerHTML = question[0].op3;
    document.getElementById("op4").innerHTML = question[0].op4;

    if (op1.className == "selectedTrue") {
        isCorrect();
    }

    console.log("Scoring System Logging: ", question.id, correct);
    }
}

isCorrect() 计分函数 #

function isCorrect() {
    correct++;
    console.log("isCorrect()", "Scoring System Logging: ", question.id,  correct);
}

提交按钮函数 submitA() #

function submitA() {
    question.id++;
    pullQuestions();

    console.log("submitA()", "Scoring System Logging: ", question.id, correct);
}

选项切换代码 #

// Option 1
function select1() {
    
    if (op1.className == "selectionFalse") {
    document.getElementById("op1").className = "selectionTrue";
    document.getElementById("op2").className = "selectionFalse";
    document.getElementById("op3").className = "selectionFalse";
    document.getElementById("op4").className = "selectionFalse";

    console.log("selected1()", "If Condition", op1.className);
    }

    else {
    document.getElementById("op1").className = "selectionFalse";
    console.log("selected1()", "If Condition", op1.className);
    }   
}

// Option 2
function select2() {

    if (op2.className == "selectionFalse") {
    document.getElementById("op1").className = "selectionFalse";
    document.getElementById("op2").className = "selectionTrue";
    document.getElementById("op3").className = "selectionFalse";
    document.getElementById("op4").className = "selectionFalse";

    console.log("selected2()", "If Condition", op2.className);
    }

    else {
    document.getElementById("op2").className = "selectionFalse";
    console.log("selected1()", "If Condition", op2.className);
    }   
} 

// Option 3
function select3() {

    if (op3.className == "selectionFalse") {
    document.getElementById("op1").className = "selectionFalse";
    document.getElementById("op2").className = "selectionFalse";
    document.getElementById("op3").className = "selectionTrue";
    document.getElementById("op4").className = "selectionFalse";

    console.log("selected3()", "If Condition", op3.className);
    }

    else {
    document.getElementById("op3").className = "selectionFalse";
    console.log("selected3()", "If Condition", op3.className);
    }   
}

// Option 4
function select4() {

    if (op4.className == "selectionFalse") {
    document.getElementById("op1").className = "selectionFalse";
    document.getElementById("op2").className = "selectionFalse";
    document.getElementById("op3").className = "selectionFalse";
    document.getElementById("op4").className = "selectionTrue";

    console.log("selected4()", "If Condition", op4.className);
    }

    else {
    document.getElementById("op4").className = "selectionFalse";
    console.log("selected4()", "If Condition", op4.className);
    }   
}

问题根源与修复方案 #

1. 类名字符串拼写错误 #

你在选项切换代码里用的是selectionTrue/selectionFalse（带字母e），但pullQuestions()里判断的是selectedTrue（少了e），导致条件永远不成立，isCorrect()自然不会触发。

修复：把pullQuestions()里的判断条件改成正确的类名：

if (op1.className == "selectionTrue") {
    isCorrect();
}

2. 计分逻辑时机错误 #

当前逻辑是加载新题时才去判断上一题的选中状态，但此时新题已经覆盖了旧选项的内容和状态，判断时机完全错误。应该在提交时先检查当前题的答案，再加载新题。

修复：调整submitA()函数的逻辑顺序：

function submitA() {
    // 先判断当前题（提交前的题目）是否答对
    if (question.id == 0 && document.getElementById("op1").className == "selectionTrue") {
        isCorrect();
    }
    // 再切换到下一题
    question.id++;
    pullQuestions();

    console.log("submitA()", "Scoring System Logging: ", question.id, correct);
}

如果后续有更多题目，可以把正确选项的信息存在题目数据里（比如question[question.id].correctOp = "op1"），这样不用写多个if判断，直接动态获取正确选项ID。

3. 可选：简化选项切换代码 #

目前的选项切换代码重复度很高，可以合并成一个通用函数，减少冗余：

function selectOption(optionId) {
    // 重置所有选项为未选中状态
    ["op1", "op2", "op3", "op4"].forEach(id => {
        document.getElementById(id).className = "selectionFalse";
    });
    // 切换当前选项的选中状态
    const currentOp = document.getElementById(optionId);
    currentOp.className = currentOp.className === "selectionFalse" ? "selectionTrue" : "selectionFalse";
    console.log(`selected${optionId.slice(-1)}()`, "If Condition", currentOp.className);
}

然后把HTML中选项的点击事件改成selectOption('op1')、selectOption('op2')即可，代码更简洁易维护。

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