如何在结果页正确调用 displayScore 函数显示测验得分

本文详解为何 results.html 中调用 displayscore() 报错“not defined”，并提供标准解决方案：确保 quiz.js 在函数调用前加载，同时给出健壮、可维护的交叉页面状态传递替代方案（不依赖 localstorage）。

在构建多页前端测验应用时，一个常见却易被初学者忽略的关键问题是：javaScript 执行顺序与脚本加载时机。你遇到的 displayScore is not defined 错误，并非函数本身写错，而是浏览器在执行 时，quiz.js 尚未加载完成，导致 displayScore 函数在全局作用域中不可见。

? 根本原因分析

观察你的 results.html 片段：

   
Your score is: 
          

浏览器按 HTML 中

✅ 正确做法：调整脚本加载顺序

只需交换两行

   
Your score is: 
          

⚠️ 注意： 默认是同步阻塞的，因此上述顺序能 100% 保证函数可用。无需 defer 或 async —— 它们反而可能破坏执行时序。

?️ 进阶建议：避免跨页状态丢失（无 localStorage）

你明确要求「不使用 localStorage」，但当前架构（每个问题页独立 HTML + 全局 quizQuestions 修改）存在严重隐患：当用户从 Q1.html 跳转到 Q2.html 时，前一页的 javascript 上下文完全销毁，quizQuestions 状态丢失。这意味着即使 displayScore 能运行，它看到的也仅是当前页（如 Q5.html）单独记录的对错，而非全部 5 题的累计结果。

推荐轻量级替代方案：URL 参数传递

1. 在每页“Next”按钮中，将当前题号和判断结果编码进 URL（例如 Q2.html?correct=1&score=1）；
2. 最终页 results.html 解析 URL 参数，汇总得分与各题正误；
3. 完全规避全局变量跨页失效问题，且不依赖任何存储 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 =>      `
Q${r.q}: ${r.correct ? '✅ Correct' : '❌ Incorrect'}
`   ).join(''); }

然后在 results.html 中调用：

   
Your Quiz Results
   
Your score is: /5
   
       

✅ 总结

• 立即修复：把
• 长期健壮性：放弃依赖跨页全局变量，改用 URL 参数传递状态，符合无存储约束且逻辑清晰；
• 额外提示：为防止用户直接访问 results.html 导致参数为空，可在 displayScoreFromParams() 中添加默认值或跳转校验。

遵循以上步骤，你不仅能解决当前报错，更能构建出可扩展、易调试的多页测验系统。