代码测验生成器点击无响应问题求助（附JS/HTML代码）

问题概述 #

开发代码测验生成器时，点击「Begin Quiz」按钮后无任何反应，排查数小时未果，确认是JavaScript层面的错误导致脚本终止。

核心错误点及修复方案 #

• DOM变量定义顺序错误：JS中先尝试操作questionScreen的样式，但该变量在后续才定义，导致脚本抛出引用错误直接终止。需将var questionScreen = document.getElementById("questionScreen")移到操作其样式之前。
• ID大小写不匹配：HTML中测验屏幕的ID是questionScreen（小写开头），但JS中用document.getElementById("QuestionScreen")（大写开头），无法获取到DOM元素。需统一ID大小写。
• 转义字符误用：JS代码中使用HTML转义字符<代替<，这在JavaScript语法中无效，会导致条件判断逻辑失效。需替换为正常的<符号。
• 缺失endQuiz函数：代码中多次调用endQuiz()但未实现该函数，会导致后续流程报错。需补充该函数的基础实现。
• 题目答案错误：部分题目答案设置错误（如第四题条件应在圆括号中、第五题字符串需用引号），需修正以保证测验正确性。

修复后的完整代码 #

JavaScript代码 #

var questions = [
    {
        title: "常用数据类型不包括以下哪一项？",
        choices: ["字符串", "布尔值", "弹窗", "数字"],
        answer: "弹窗"
    },
    {
        title: "JavaScript中的数组可以存储什么？",
        choices: ["数字和字符串", "其他数组", "布尔值", "以上全部"],
        answer: "以上全部"
    },
    {
        title: "开发和调试时，用于向调试器打印内容的非常有用的工具是？",
        choices: ["JavaScript", "终端/bash", "for循环", "console.log"],
        answer: "console.log"
    },
    {
        title: "if/else语句中的条件被包裹在什么中？",
        choices: ["引号", "大括号", "圆括号", "方括号"],
        answer: "圆括号"
    },
    {
        title: "字符串值赋值给变量时必须被包裹在____中？",
        choices: ["逗号", "大括号", "引号", "圆括号"],
        answer: "引号"
    }
];

// 调整变量定义顺序，先获取所有DOM元素
var welcomeScreen = document.getElementById("welcomeScreen");
var highScoresBoard = document.getElementById("highScore");
var submit = document.getElementById("submit");
var questionTitle = document.getElementById("question");
var questionScreen = document.getElementById("questionScreen"); // 修正ID大小写
var answersListParent = document.getElementById("answers");
var timerDisplay = document.getElementById("timer");
var beginQuizBtn = document.getElementById("beginQuizBtn");

questionScreen.style.display = "none";
var questionAskedIndex = 0;
var time = 60;
var quizTimer;

function startQuiz() {
    welcomeScreen.style.display = "none";
    questionScreen.style.display = "block";
    startQuizTimer();
    timerDisplay.textContent = time;
    startQuestions();
}

function startQuizTimer() {
    quizTimer = setInterval(function () {
        time--;
        timerDisplay.textContent = time;
        if (time < 0) { // 替换&为<
            time = 0;
            endQuiz();
        }
    }, 1000);
}

function startQuestions() {
    var currentQuestion = questions[questionAskedIndex].title;
    questionTitle.textContent = currentQuestion;
    answersListParent.innerHTML = "";
    var currentQuestionAnswers = questions[questionAskedIndex].choices;
    currentQuestionAnswers.forEach(function (answer) {
        var answerButton = document.createElement("button");
        answerButton.setAttribute("value", answer);
        answerButton.textContent = answer;
        answerButton.onclick = checkAnswerSelected;
        answersListParent.appendChild(answerButton);
    });
}

function checkAnswerSelected() {
    var answerSelected = this.value;
    if (answerSelected === questions[questionAskedIndex].answer) {
        alert("正确！");
    } else {
        alert("错误！");
        time -= 10;
        if (time <= 0) { // 替换&为<
            endQuiz();
        }
        timerDisplay.textContent = time;
    }
    questionAskedIndex++;
    console.log(questionAskedIndex);
    if (questionAskedIndex === questions.length) {
        endQuiz();
    } else {
        startQuestions();
    }
}

// 补充endQuiz函数实现
function endQuiz() {
    clearInterval(quizTimer);
    questionScreen.style.display = "none";
    highScoresBoard.style.display = "block";
    document.getElementById("scoreDisplay").textContent = "你的得分：" + time;
}

beginQuizBtn.onclick = startQuiz;

HTML代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>代码测验</title>
</head>
<body>
    <div id="welcomeScreen" class="welcomeScreen">
        <h1>超有趣的代码测验</h1>
        <button id="beginQuizBtn" class="beginQuizBtn">开始测验</button>
    </div>
    <div id="questionScreen" class="questionScreen">
        <h1 id="timer"></h1>
        <p>
            在规定时间内回答代码主题的问题即可获胜。
            注意！答错会扣除10秒时间。
            祝你玩得开心，好运！
        </p>
        <h2 id="question" class="question"></h2>
        <ol id="answers" class="answers"></ol>
    </div>
    <div id="highScore" style="display: none;">
        <h3>做得好！</h3>
        <h4>将你的名字加入荣誉榜</h4>
        <h5 id="scoreDisplay"></h5>
        <input type="text" id="yourName" placeholder="输入你的名字"/>
        <button id="submit">提交</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

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