JavaScript开发编码测验时选项不更新、答案重复显示问题求助

你代码的问题全在逻辑硬编码和DOM更新遗漏上，一共5个核心bug：

• 同时定义了q和currentQuestion两个题目索引，逻辑完全脱节：题干渲染用q还做了自增，但选项、答案渲染全程硬编码取quizQuestions[0]，永远读第一题的数据
• 渲染新内容前从来不清空旧的选项、答案DOM节点，旧选项会一直留在页面上，新选项只会追加在后面
• 选项点击后只写了显示答案的逻辑，完全没做「展示答案后加载下一题」的流程控制
• 最后一道题的答案属性名写错了：其他题都是小写answer，最后题记成大写Answer，会读不到值
• 循环用的i变量没加声明，会变成全局变量污染逻辑

JavaScript 部分 #

把你原来的JS代码全替换成下面的就行，计时器、算分、最高分的逻辑你自己往对应位置补就可以：

// 题库
const quizQuestions = [
    {
        question: "创建DOM元素对象需要使用哪个方法？", 
        choices: [".getAttribute()", ".createElement()", ".getElementById", ".setAttribute()"], 
        answer: ".createElement()"
    },
    {
        question: "变量的作用是什么？", 
        choices: ["遍历数组", "关联JS和HTML文件", "存储数据", "执行特定任务"], 
        answer: "存储数据"
    },
    {
        question: "声明函数时，function关键字后面需要跟什么符号？", 
        choices: ["()", ";", "/", "++"], 
        answer: "()"
    }, 
    {
        question: "需要固定次数执行一段代码时，应该使用什么语法？", 
        choices: ["While循环", "Math.random()", "For循环", "Switch语句"], 
        answer: "For循环"
    }, 
    {
        question: "switch代码块中使用break会终止块内代码执行，这个说法是否正确？", 
        choices: ["正确", "错误"], 
        answer: "正确"
    }
];

// DOM节点缓存
const highScoresButtonEl = document.querySelector(".high-scores");
const startQuizEl = document.querySelector(".quiz-button");
const choicesEl = document.querySelector(".choices");
const introTextEl = document.querySelector(".intro-text");
const questionsEl = document.querySelector(".questions");
const answerEl = document.querySelector(".answer")
const timerEl = document.querySelector(".timer");

// 全局状态：只保留一个当前题目索引，不要搞多个变量记位置
let currentQuestionIndex = 0;
// 选项列表容器
const choicesListEl = document.createElement("ul");
choicesEl.appendChild(choicesListEl);

// 开始测验按钮逻辑
startQuizEl.addEventListener("click", function() {
    introTextEl.style.display = "none";
    startQuizEl.style.display = "none";
    // 你原来的startTimer()逻辑放这
    renderQuestion();
})

// 选项点击逻辑（用事件委托，不用给每个li单独绑事件）
choicesEl.addEventListener("click", function (e) {
    if(e.target.tagName !== 'LI') return;
    // 显示当前题答案
    showAnswer();
    // 禁用所有选项防止重复点
    document.querySelectorAll('li', choicesListEl).forEach(item => item.style.pointerEvents = 'none');
    // 停1秒给用户看答案，再切下一题
    setTimeout(() => {
        currentQuestionIndex++;
        // 没到最后一题就继续渲染
        if(currentQuestionIndex < quizQuestions.length){
            answerEl.innerHTML = '';
            renderQuestion();
        }else{
            // 答完所有题的逻辑，比如展示得分你自己补
            questionsEl.textContent = '测验结束！';
            choicesListEl.innerHTML = '';
            answerEl.innerHTML = '';
        }
    }, 1000)
})

// 渲染当前题干+选项
function renderQuestion () {
    questionsEl.textContent = quizQuestions[currentQuestionIndex].question;
    // 先清空旧选项！这步你之前完全没写
    choicesListEl.innerHTML = '';
    // 循环渲染当前题的选项，别再硬编码取[0]了
    for (let i = 0; i < quizQuestions[currentQuestionIndex].choices.length; i++){
        const li = document.createElement("li");
        li.textContent = quizQuestions[currentQuestionIndex].choices[i];
        li.style.cursor = 'pointer';
        li.style.margin = '6px 0';
        choicesListEl.appendChild(li);
    }
}

// 显示当前题正确答案
function showAnswer () {
    answerEl.innerHTML = '';
    const tip = document.createElement("p");
    tip.textContent = `正确答案：${quizQuestions[currentQuestionIndex].answer}`;
    answerEl.appendChild(tip);
}

HTML 部分 #

你原来的HTML结构基本没问题，修正下标签闭合错误就行：

<header>
    <ul>
        <li><button class="high-scores" id="high-scores">最高分</button></li>
        <li class="timer"></li>
    </ul>
</header>
<main>
    <div class="intro-text">
        <h1>限时编程测验</h1>
        <p>来测测你的编程知识掌握程度吧！每答错一题会扣除8秒总时间，祝你好运！</p>
    </div>
</main>
<section class="quiz-content">
    <button class="quiz-button" id="quiz-button" type="submit">开始测验</button>
    <div class="questions" id="questions"></div>
    <div class="choices" id="choices"></div>
    <div class="answer" id="answer"></div>
</section>

• 所有题目数据读取统一用currentQuestionIndex索引，删掉冗余的q变量，彻底解决永远读第一题的问题
• 每次渲染新题、显示答案前先清空对应容器的旧内容，解决旧选项残留问题
• 补全了点击选项后延迟切下一题的流程，完全符合你一开始的预期逻辑
• 修复了最后一题答案属性名大小写错误、循环变量未声明的隐性bug
• 加了答题结束的边界判断，避免索引超出数组长度报错
• 选项点击用事件委托实现，不用每次渲染选项都重新绑事件，性能更好逻辑更简单

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