答题小游戏开发：如何获取并比较正确与选中答案的索引？

核心错误点 #

1. 正确答案索引获取错误：

   • 使用find方法会返回符合条件的答案对象，而非索引；应改用findIndex。
   • 判断条件错误：answer[index] === true是无效逻辑，每个answer是包含text和correct的对象，正确判断应为answer.correct === true（或直接answer.correct，因为它本身是布尔值）。

2. 点击事件逻辑混乱：

   • 按钮自带onclick="checkAnswer()"，同时在checkAnswer里又循环绑定addEventListener，导致重复绑定事件，触发逻辑混乱。
   • 获取选中答案索引的方式错误：answerButton[index]是无效操作，DOM元素没有此类索引属性，应利用循环时的index参数标记按钮对应的答案索引。

3. 变量作用域问题：
   点击回调里的selectedAnswer无法被外部checkAnswer函数捕获，无法完成索引比较。

修正后的完整代码 #

HTML部分（移除重复的onclick）

<button id="answers-btn-1" class="answers-btn"></button>
<button id="answers-btn-2" class="answers-btn"></button>
<button id="answers-btn-3" class="answers-btn"></button>
<button id="answers-btn-4" class="answers-btn"></button>

JavaScript部分

const questions = [
    {
        question: 'What year did the United State become independent?',
        answers: [
          { text: '1776', correct: true },
          { text: '1676', correct: false },
          { text: '1576', correct: false },
          { text: '1876', correct: false }
        ]
      },
      // 可添加更多题目
];

const answerButtons = document.querySelectorAll('.answers-btn');
let randomQuestion;

// 加载随机题目并填充按钮文本
function loadQuestion() {
    randomQuestion = questions[Math.floor(Math.random() * questions.length)];
    answerButtons.forEach((btn, index) => {
        btn.textContent = randomQuestion.answers[index].text;
    });
    bindAnswerEvents();
}

// 绑定答案按钮的点击事件
function bindAnswerEvents() {
    // 克隆按钮移除旧事件，避免重复绑定
    answerButtons.forEach(btn => btn.replaceWith(btn.cloneNode(true)));
    const newAnswerButtons = document.querySelectorAll('.answers-btn');
    
    // 获取正确答案的索引
    const correctIndex = randomQuestion.answers.findIndex(answer => answer.correct);
    
    newAnswerButtons.forEach((btn, index) => {
        btn.addEventListener('click', () => {
            // 比较选中索引与正确索引
            console.log(index === correctIndex ? 'correct' : 'incorrect');
        });
    });
}

// 页面加载完成后初始化题目
document.addEventListener('DOMContentLoaded', loadQuestion);

关键修正说明 #

• 用findIndex直接获取正确答案的索引，替代原错误的find用法。
• 移除按钮的onclick属性，改用统一的addEventListener绑定点击事件，避免重复触发。
• 通过loadQuestion函数统一管理题目加载与按钮文本填充，每次加载题目时重新绑定事件（通过克隆按钮清除旧事件）。
• 点击按钮时直接使用循环的index参数作为选中答案的索引，与正确索引对比输出结果。

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