为什么JavaScript无法更新HTML页面数据，JSON内容加载失败？

问题根因 #

• 核心问题是脚本加载时机错误：你将JS脚本引入标签放在了<head>区域，浏览器执行脚本时，<body>内的题目、选项、按钮等DOM元素还未完成渲染，所有document.getElementById和querySelectorAll操作拿到的都是空值，loadQuiz()执行时找不到要更新的节点，自然没法替换占位内容。
• 次要错误1：最终得分展示的模板字符串语法错误，你写的$(score)应该改为${score}，否则分数不会正常渲染。
• 次要错误2：CSS头部的第三方字体导入语句拼写错误，不需要自定义字体可以直接删除该行，需要使用的话修正对应拼写即可。

修复方案 #

1. 调整脚本加载时机 #

修改HTML文件中的脚本引入方式，二选一即可：
方案A：把<script src="script.js"></script>移到</body>结束标签的前面，示例：

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

方案B：给原有script标签加defer属性，让浏览器等DOM加载完成后再执行脚本：

<script src="script.js" defer></script>

2. 修复模板字符串语法 #

把JS代码最后结果页的$(score)改为${score}：

quiz.innerHTML = `
<h2>你答对了 ${score}/${quizData.length} 道题</h2>
<button onclick="location.reload()">重新开始</button> 
`;

修改完成后刷新页面即可看到题目和选项正常加载，答题、计分逻辑也会正常运行。

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