JavaScript测验：结果页displayScore函数未定义及数据留存问题

核心原因 #

不同页面的JavaScript运行环境完全隔离，quiz.js里的函数和测验数据无法直接在结果页访问，且你没有把分数、答题结果传递到结果页，这就是导致displayScore未定义和数据无法展示的根本问题。

分步解决方法 #

1. 题目页提交时传递测验数据到结果页
   用户提交测验后，先计算分数和每题的对错结果，把这些数据转成JSON字符串，通过URL参数传递到结果页：

   // 示例：假设已完成分数计算和结果收集
   const score = 8;
   const results = [
     { question: "JS的全称是？", isCorrect: true },
     { question: "typeof []返回值是？", isCorrect: false }
   ];
   
   // 转换为URL安全的字符串
   const quizData = encodeURIComponent(JSON.stringify({ score, results }));
   // 跳转结果页并携带数据
   window.location.href = `results.html?data=${quizData}`;
   

2. 结果页引入quiz.js并读取URL参数
   结果页必须先引入quiz.js（确保displayScore函数可访问），再从URL取出测验数据，调用函数渲染内容：

   <!-- 结果页HTML，先引入quiz.js -->
   <script src="quiz.js"></script>
   <script>
     // 解析URL参数
     const urlParams = new URLSearchParams(window.location.search);
     const quizDataStr = urlParams.get('data');
   
     if (quizDataStr) {
       // 解析分数和结果数据
       const { score, results } = JSON.parse(decodeURIComponent(quizDataStr));
       // 调用displayScore渲染结果
       displayScore(score, results);
     } else {
       // 处理未完成测验直接访问结果页的情况
       document.getElementById('result-area').textContent = '请先完成测验再查看结果！';
     }
   </script>
   

3. 确保displayScore为全局函数并支持参数传入
   检查quiz.js里的函数定义，必须全局暴露，且能接收分数和结果参数来操作DOM：

   // quiz.js中的正确写法：全局函数
   function displayScore(score, results) {
     // 渲染总分
     const scoreElement = document.getElementById('total-score');
     scoreElement.textContent = `总分：${score}/${results.length}`;
   
     // 渲染每题对错
     const resultsContainer = document.getElementById('question-results');
     results.forEach((item, index) => {
       const resultItem = document.createElement('div');
       resultItem.innerHTML = `
         <p>第${index+1}题：${item.question}</p>
         <span style="color: ${item.isCorrect ? 'green' : 'red'}">${item.isCorrect ? '回答正确' : '回答错误'}</span>
       `;
       resultsContainer.appendChild(resultItem);
     });
   }
   

常见坑点排查 #

• 确认结果页的quiz.js引入路径正确，比如两者在同一目录下就写src="quiz.js"，路径错误会导致函数加载失败。
• 不要把displayScore放在局部作用域内（比如DOMContentLoaded回调内部），否则结果页无法访问该函数。

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