HTML 中外部 JavaScript 文件执行失败，通常因脚本在 DOM 元素加载前运行导致 getElementById 返回 null；正确做法是将 移至 并添加 defer 属性，或确保脚本在 DOM 尾部加载。
html 中外部 javascript 文件执行失败，通常因脚本在 dom 元素加载前运行导致 `getelementbyid` 返回 `null`；正确做法是将 `<script>` 移至 `<head>` 并添加 `defer` 属性，或确保脚本在 dom 尾部加载。</script>
在 Web 开发中，将 JavaScript 逻辑抽离为独立 .js 文件是良好实践，但若脚本在 DOM 元素尚未解析完成时执行，document.getElementById() 将返回 null，进而导致 addEventListener 报错：
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
这正是你遇到的核心问题——你的 script.js 在 标签开头附近（甚至可能在 之前）被加载，而此时 <button id="right"></button> 和 <input id="outputright"> 等元素尚未存在于 DOM 中，因此 rightInc 和 rightAns 均为 null，后续调用 .addEventListener() 必然失败。
✅ 正确的加载方式（推荐）
将所有 <script></script> 标签（包括 jQuery、Bootstrap JS 及你的 script.js）统一置于 内，并为自定义脚本添加 defer 属性：
立即学习“Java免费学习笔记（深入）”；
<head> <meta charset="UTF-8"> <title>Quiz App</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery（必须在 Bootstrap JS 之前） --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Bootstrap JS --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!-- 自定义脚本：defer 确保 DOM 解析完成后执行 --> <script defer src="script.js"></script> </head>
⚠️ 注意：你原代码中误将 Bootstrap 的 JS 文件通过 <link> 引入（应为 <script></script>），且版本混用（CSS 是 3.3.7，JS 却是 3.3.6）。已修正如下：
- 删除错误的
<link rel="stylesheet" href="...bootstrap.min.js"> - 所有 JS 资源使用
<script></script>标签引入 - 保持 jQuery → Bootstrap JS → 自定义脚本的加载顺序（依赖关系不可颠倒）
? script.js 的健壮性增强（可选优化）
虽然 defer 已解决执行时机问题，但为提升容错性，建议在 script.js 中增加 DOM 就绪检查：
// script.js
let rightCount = 0;
let wrongCount = 0;
function incrementRight() {
rightCount++;
document.getElementById("outputright").value = rightCount;
}
function incrementWrong() {
wrongCount++;
document.getElementById("outputwrong").value = wrongCount;
}
// 确保 DOM 加载完成后再绑定事件
document.addEventListener("DOMContentLoaded", () => {
const rightBtn = document.getElementById("right");
const wrongBtn = document.getElementById("wrong");
if (rightBtn) {
rightBtn.addEventListener("click", incrementRight);
}
if (wrongBtn) {
wrongBtn.addEventListener("click", incrementWrong);
}
});✅ 优势：
- 显式等待 DOM 就绪，双重保险；
- 避免因 ID 不存在导致脚本中断；
- 函数内联更新值，无需额外
getRight()封装，更简洁。
? 其他关键注意事项
-
路径问题：
src=".\script.js"是 Windows 风格路径，在 Web 环境中无效；统一使用src="script.js"（同级目录）或src="./script.js"（显式相对路径，更规范）。 -
浏览器缓存：修改后若仍不生效，请强制刷新（
Ctrl+Shift+R或Cmd+Shift+R），避免加载旧缓存。 -
控制台验证：打开开发者工具（F12）→ Console 标签页，确认无
404 Not Found（脚本未找到）或语法错误。
✅ 最终结构示意（精简版）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Quiz App</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script defer src="script.js"></script> </head> <body> <!-- 你的 NavBar、Modals 等 HTML 内容（保持不变） --> </body> </html>
遵循以上方案，你的 script.js 将能可靠访问所有 DOM 元素，实现点击“Yes”/“No”按钮实时更新 Profile 模态框中的计数器——无需内联脚本，真正实现关注点分离与可维护性。
