JavaScript实现枚举型问卷逻辑：解决重复计分与乱序匹配问题

问题分析 #

原代码存在两个核心逻辑错误：

1. 每个输入框会遍历完整的correctList，导致单个输入被多次判定——比如输入一个正确答案，会因和其他5个正确项不匹配而多次减分，最终分数完全失真
2. 未处理重复答案的情况：同一个正确答案重复填写会重复计分

修正后的实现方案 #

核心逻辑 #

• 单个输入仅做一次正确性判断，而非遍历全部正确列表
• 用集合记录已计分的正确答案，避免重复加分
• 答案匹配正确数组内容即算对，不限制顺序
• 错误答案不扣分（可按需调整计分规则）

完整代码 #

HTML 部分

<label>score: <span>0</span></label>
<h3>
至少写出5个以字母A开头的国家
</h3>
<input type="text" class="enumeration"/>
<input type="text" class="enumeration"/>
<input type="text" class="enumeration"/>
<input type="text" class="enumeration"/>
<input type="text" class="enumeration"/>
<button>
提交
</button>

JavaScript 部分

const correctList = ['afghanistan','albania','algeria','argentina','armenia','angola'];
const scoreElement = document.querySelector('span');
const submitBtn = document.querySelector('button');

submitBtn.addEventListener('click', function () {
    let score = 0;
    const yourAnswerAre = [];
    const usedCorrectAnswers = new Set(); // 记录已计分的正确答案，防止重复

    document.querySelectorAll('.enumeration').forEach((input, index) => {
        const inputValue = input.value.trim().toLowerCase(); // 统一转小写，兼容大小写输入
        const isCorrect = correctList.includes(inputValue);
        
        // 仅当答案正确且未被计过分时加分
        if (isCorrect && !usedCorrectAnswers.has(inputValue)) {
            score++;
            usedCorrectAnswers.add(inputValue);
        }

        yourAnswerAre.push({
            'Numb': index + 1,
            'Answer': inputValue,
            'IsCorrect': isCorrect ? 'yes' : 'no'
        });
    });

    scoreElement.innerText = score;
    console.log(yourAnswerAre);
});

关键细节说明 #

• 用Set存储已计分的正确答案，确保同一答案仅加一次分
• 通过includes方法单次判断输入是否在正确列表中，避免原代码的多次遍历错误
• 统一将输入值转小写，解决用户输入大小写不一致的问题
• 每个输入对应一条结果记录，符合问卷结果的统计逻辑

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