如何使用JavaScript从问题数组中依次选择并展示题目？

问题核心问题点 #

你的代码无法实现题目切换，根源在于：

• 硬编码题目索引（直接用questions[2]），没有变量跟踪当前题目位置
• nextQuestion函数无实际切换逻辑
• 显示新题目时未清空旧内容，导致题目叠加
• 选择答案后未触发下一题流程，也没正确计算得分
• 存在拼写错误：anwsers应为answers

修复后的完整代码 #

以下是调整后的代码，关键修改已标注：

var score = 0;
var currentQuestionIndex = 0; // 用该变量跟踪当前显示的题目位置

var questions = [
    { 
        question: "JavaScript is an....... language?",
        answers: [ "object-oriented", "object-based", "procedural", "none of the above"],
        correct: 1
    },
    { 
        question: "Which of the following keywords is used to define a variable in JavaScript?",
        answers: [ "var", "let", "both A and B", "none of the above"],
        correct: 2
    }, 
    {
        question: "Which of the following methods is used to select HTML elements using JavaScript?",
        answers: ["getElementsById", "getElementByClassName", "both A and B", "none of the above"] ,
        correct: 1
    }
];

// 显示当前题目
function showQuestion() {
    const quesContainer = document.getElementById('questions');
    // 清空容器旧内容，避免题目叠加
    quesContainer.innerHTML = '';

    const currentQuestion = questions[currentQuestionIndex];
    
    // 创建题目元素
    const qDiv = document.createElement('div');
    const p = document.createElement('p');
    p.textContent = currentQuestion.question;
    qDiv.appendChild(p);
    quesContainer.appendChild(qDiv);

    // 填充选项内容
    const altElements = document.querySelectorAll('.alts');
    altElements.forEach(function(element, index){
        element.textContent = currentQuestion.answers[index];
        
        // 先移除旧事件，避免重复绑定
        element.removeEventListener('click', handleAnswerClick);
        // 绑定新的答题点击事件
        element.addEventListener('click', handleAnswerClick.bind(null, index));
    });
}

// 处理答题点击逻辑
function handleAnswerClick(selectedIndex) {
    const currentQuestion = questions[currentQuestionIndex];
    // 判断答案并更新得分
    if(currentQuestion.correct === selectedIndex) {
        score++;
        console.log('correct answer');
    } else {
        console.log('wrong answer');
    }
    // 切换到下一题
    nextQuestion();
}

// 实现下一题切换逻辑
function nextQuestion() {
    currentQuestionIndex++;
    // 判断是否还有未展示的题目
    if (currentQuestionIndex < questions.length) {
        showQuestion();
    } else {
        // 所有题目完成，展示最终得分
        const quesContainer = document.getElementById('questions');
        quesContainer.innerHTML = `<p>测验结束！你的得分是：${score}/${questions.length}</p>`;
        // 隐藏选项和按钮
        document.querySelectorAll('.alts').forEach(el => el.style.display = 'none');
        document.getElementById('btn').style.display = 'none';
    }
}

// 初始化显示第一题
showQuestion();

// 下一题按钮逻辑（和点击选项切换二选一即可）
const btn = document.getElementById('btn');
btn.addEventListener('click', function() {
    nextQuestion();
});

额外说明 #

• 代码同时支持点击选项自动切换和点击按钮切换两种模式，可根据需求选择其一
• 所有题目完成后会自动显示最终得分，并隐藏选项和按钮
• 每次绑定点击事件前先移除旧事件，避免多次绑定导致逻辑混乱

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