本文详解为何 results.html 中调用 displayscore() 报错“not defined”，并提供标准解决方案：确保 quiz.js 在函数调用前加载，同时给出健壮、可维护的交叉页面状态传递替代方案（不依赖 localstorage）。
在构建多页前端测验应用时，一个常见却易被初学者忽略的关键问题是：JavaScript 执行顺序与脚本加载时机。你遇到的 displayScore is not defined 错误，并非函数本身写错，而是浏览器在执行 <script>displayScore();</script> 时，quiz.js 尚未加载完成，导致 displayScore 函数在全局作用域中不可见。
? 根本原因分析
观察你的 results.html 片段：
<body> <p>Your score is: <span id="score"></span></p> <script>displayScore();</script> <!-- ❌ 此时 quiz.js 还没加载！ --> <script src="quiz.js"></script> <!-- ✅ 定义 displayScore 的地方 --> </body>
浏览器按 HTML 中 <script> 标签出现的自上而下顺序解析和执行脚本。因此，displayScore() 被调用时，quiz.js 内容尚未注入，函数自然未定义。
✅ 正确做法：调整脚本加载顺序
只需交换两行 <script> 的位置即可修复：
<body> <p>Your score is: <span id="score"></span></p> <script src="quiz.js"></script> <!-- ✅ 先加载，定义函数 --> <script>displayScore();</script> <!-- ✅ 再调用，此时函数已存在 --> </body>
⚠️ 注意：<script> 默认是同步阻塞的，因此上述顺序能 100% 保证函数可用。无需 defer 或 async —— 它们反而可能破坏执行时序。
?️ 进阶建议：避免跨页状态丢失（无 localStorage）
你明确要求「不使用 localStorage」，但当前架构（每个问题页独立 HTML + 全局 quizQuestions 修改）存在严重隐患：当用户从 Q1.html 跳转到 Q2.html 时，前一页的 JavaScript 上下文完全销毁，quizQuestions 状态丢失。这意味着即使 displayScore 能运行，它看到的也仅是当前页（如 Q5.html）单独记录的对错，而非全部 5 题的累计结果。
推荐轻量级替代方案：URL 参数传递
- 在每页“Next”按钮中，将当前题号和判断结果编码进 URL（例如 Q2.html?correct=1&score=1）；
- 最终页 results.html 解析 URL 参数，汇总得分与各题正误；
- 完全规避全局变量跨页失效问题，且不依赖任何存储 API。
示例（简化版）：
// 在 quiz.js 中添加工具函数
function getQueryParam(param) {
return new URLSearchParams(window.location.search).get(param);
}
function displayScoreFromParams() {
const total = 5;
let score = 0;
const results = [];
for (let i = 0; i < total; i++) {
const isCorrect = getQueryParam(`q${i}`) === '1';
results.push({ q: i+1, correct: isCorrect });
if (isCorrect) score++;
}
document.getElementById('score').textContent = score;
// 渲染详细结果（可选）
const detailEl = document.getElementById('detailed-results');
detailEl.innerHTML = results.map(r =>
`<p>Q${r.q}: ${r.correct ? '✅ Correct' : '❌ Incorrect'}</p>`
).join('');
}然后在 results.html 中调用：
<body> <h2>Your Quiz Results</h2> <p>Your score is: <span id="score"></span>/5</p> <div id="detailed-results"></div> <script src="quiz.js"></script> <script>displayScoreFromParams();</script> </body>
✅ 总结
- 立即修复：把 <script src="quiz.js"> 移到所有调用它的 <script> 标签之前；
- 长期健壮性：放弃依赖跨页全局变量，改用 URL 参数传递状态，符合无存储约束且逻辑清晰；
- 额外提示：为防止用户直接访问 results.html 导致参数为空，可在 displayScoreFromParams() 中添加默认值或跳转校验。
遵循以上步骤，你不仅能解决当前报错，更能构建出可扩展、易调试的多页测验系统。
