为何Quiz应用中变量值每次点击按钮会多次递增而非单次？

问题背景 #

这是一款从数组读取题目与答案数据的Quiz应用，通过初始值为0的rightAnswers变量统计用户答对题数，每答对一题该变量加1，答题结束后展示最终结果。核心逻辑由checkAnswer函数实现，负责对比用户选择与正确答案，匹配则累加计数。

异常现象 #

• 全部答对9题时，结果错误显示为答对14题
• 答对第一题时，控制台依次打印0、1（计数被累加2次）
• 答对第二题时，控制台依次打印2、3、4（计数被累加3次）
• 即使先答错前两题，后续答对题目仍会出现随机计数异常

问题根源 #

问题出在checkAnswer函数的循环逻辑中：

function checkAnswer(correctAnswer, qCount) {
        let answers = document.getElementsByName('question');
        let chosenAnswer;
    
        for (let i = 0; i < answers.length; i++) {
            if (answers[i].checked) {
                chosenAnswer = answers[i].dataset.answer;
            }
    
            // 每一次循环都会执行此判断，导致多次累加
            if (correctAnswer === chosenAnswer) {
                console.log(rightAnswers);
                rightAnswers++;
            }
        }
    }

当找到用户选中的答案并赋值给chosenAnswer后，后续的循环迭代会持续执行correctAnswer === chosenAnswer的判断。只要答案正确，每多一次循环就会多累加一次rightAnswers，最终导致计数严重偏高。

修复方案 #

调整checkAnswer函数的逻辑，确保仅对用户选中的答案进行一次正确性判断：

修复后的代码 #

function checkAnswer(correctAnswer, qCount) {
    let answers = document.getElementsByName('question');
    let chosenAnswer;

    // 遍历找到用户选中的答案后立即跳出循环
    for (let i = 0; i < answers.length; i++) {
        if (answers[i].checked) {
            chosenAnswer = answers[i].dataset.answer;
            break;
        }
    }

    // 仅进行一次正确性判断与计数累加
    if (correctAnswer === chosenAnswer) {
        console.log(rightAnswers);
        rightAnswers++;
    }
}

简化写法（可选） #

function checkAnswer(correctAnswer, qCount) {
    let answers = document.getElementsByName('question');
    
    for (let i = 0; i < answers.length; i++) {
        if (answers[i].checked) {
            // 找到选中项后直接判断并累加，随后跳出循环
            if (correctAnswer === answers[i].dataset.answer) {
                console.log(rightAnswers);
                rightAnswers++;
            }
            break;
        }
    }
}

修复原理 #

• 遍历选项时，找到用户选中的答案后立即跳出循环，避免不必要的遍历操作
• 仅对选中的答案执行一次正确性判断，确保每答对一题仅累加一次rightAnswers，彻底解决计数异常问题

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