JavaScript测验计时器异常：页面重复刷新问题修复求助

问题根源 #

1. 页面刷新核心原因：表单内的「Next Question」按钮默认是submit类型，点击后会触发表单提交，导致页面重载，第二题刚显示就被刷新消失。
2. 其他次要问题：
   • 重复绑定按钮点击事件：countdown函数每次执行都会给「Continue」按钮添加新的点击监听，导致多次触发逻辑。
   • 不存在startQuiz函数：HTML中「Continue」按钮的onclick="startQuiz()"引用了未定义的函数，控制台会报错。
   • 计时器重复启动：点击「Continue」后再次调用setInterval(countdown, 1000)，导致多个计时器同时运行。
   • 题目索引判断错误：nextQuestion中用硬编码的3判断是否有下一题，实际只有2道题，会导致索引越界。

修复后的代码 #

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz</title>
</head>
<body>
    <div class="start" id="introSection">
        <h1><u>Welcome to my Quiz</u></h1>
        <p class="start-text">Welcome to my client-side scripting Quiz.
            There will be ten questions you will have to answer, and your 
            results will be shown to you after you have finished the Quiz.
            Best of luck!<br><br>
            You can press "Continue" or wait for the page to load on its own.
        </p> 
        <div id="countdown">5</div>
        <button id="nextButton">Continue</button>
    </div>

    <div class="question" id="questionSection" style="display:none;">
        <h2 id="question"></h2>
        <form id="quizForm">
            <label><input type="radio" name="answer" value="a" id="optionA"> <span id="labelA"></span></label><br>
            <label><input type="radio" name="answer" value="b" id="optionB"> <span id="labelB"></span></label><br>
            <label><input type="radio" name="answer" value="c" id="optionC"> <span id="labelC"></span></label><br>
            <label><input type="radio" name="answer" value="d" id="optionD"> <span id="labelD"></span></label><br>
            <!-- 设置type="button"，避免默认表单提交行为 -->
            <button type="button" id="nextQuestionButton" onclick="nextQuestion()">Next Question</button>
        </form>
    </div>

    <script src="ScriptingFinal.js"></script>
</body>
</html>

JavaScript代码

let timeLeft = 5;
let currentQuestionIndex = 0;
let don = false;
// 保存计时器ID，方便后续清除
let countdownInterval = setInterval(countdown, 1000);

function countdown() {
    if (don === false) {
        if (timeLeft > 0) {
            timeLeft--;
            document.getElementById("countdown").innerText = timeLeft;
        }
    }
    // 仅在未进入题目区域且倒计时结束时执行切换逻辑
    if (timeLeft === 0 && !don) {
        document.getElementById("introSection").style.display = "none";
        document.getElementById("questionSection").style.display = "block";
        don = true;
        clearInterval(countdownInterval);
    }
}

// 全局绑定Continue按钮点击事件，仅执行一次
document.getElementById("nextButton").addEventListener("click", function() {
    document.getElementById("introSection").style.display = "none";
    document.getElementById("questionSection").style.display = "block";
    don = true;
    clearInterval(countdownInterval);
});

let questions = [];
questions.push({ Question: "What school do we go to?", a: "MTU", b: "ATU", c: "CIT", d: "LIT" });
questions.push({ Question: "What is 2 + 2?", a: "3", b: "4", c: "5", d: "6" });

displayQuestion();

function displayQuestion() {
    let currentQuestion = questions[currentQuestionIndex];
    document.getElementById("question").innerText = currentQuestion.Question;
    document.getElementById("labelA").innerText = currentQuestion.a;
    document.getElementById("labelB").innerText = currentQuestion.b;
    document.getElementById("labelC").innerText = currentQuestion.c;
    document.getElementById("labelD").innerText = currentQuestion.d;
}

function nextQuestion() {
    don = true;
    currentQuestionIndex++;

    // 用题目数组长度判断是否还有下一题，适配题目数量变化
    if (currentQuestionIndex < questions.length) {
        displayQuestion();
    } else {
        // 所有题目完成后的逻辑，可根据需求修改
        alert("Quiz completed!");
    }
}

修复要点说明 #

1. 阻止页面刷新：将「Next Question」按钮的type设为button，彻底避免触发表单默认提交行为。
2. 优化事件绑定：把「Continue」按钮的点击监听移到全局，只绑定一次，防止重复触发。
3. 清理计时器：进入题目区域后清除倒计时器，避免无效运行；同时调整倒计时结束的判断逻辑，确保只执行一次切换操作。
4. 适配题目数量：用questions.length代替硬编码数字判断下一题，避免索引越界。
5. 移除无效引用：删除HTML中「Continue」按钮的onclick="startQuiz()"，消除控制台报错。

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