运行简易计算器JS代码出现ReferenceError: document is not defined报错如何解决

触发报错的代码 #

document.querySelector('loan-form').addEventListener('click', calculateResults)

完整报错信息 #

ReferenceError: document is not defined

报错原因 #

该报错的核心是当前运行环境不存在浏览器提供的document DOM对象，常见触发场景如下：

• 直接在Node.js环境下运行前端JS代码，Node.js为服务端运行环境，原生未内置DOM相关API
• JS代码执行时机早于HTML页面DOM加载完成，此时document对象还未初始化
• 在服务端渲染（SSR）框架（如Next.js、Nuxt.js）的服务端运行阶段执行了客户端DOM操作代码
• 额外注意：当前代码的选择器书写大概率存在问题，如果你要选中id为loan-form的表单，需要给选择器加#前缀，即document.querySelector('#loan-form')，只有选择<loan-form>自定义标签时才可以直接写loan-form。

对应解决方案 #

场景1：直接在Node.js运行前端代码 #

将JS代码放到HTML文件内引入执行，不要使用node xxx.js的方式运行前端DOM操作代码，示例HTML结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
<body>
  <form id="loan-form">
    <!-- 计算器表单内容 -->
  </form>
  <!-- JS文件放在body末尾，确保DOM加载完成后再执行 -->
  <script src="你的计算器JS文件路径"></script>
</body>
</html>

场景2：JS执行时机早于DOM加载 #

如果你的JS代码放在HTML的<head>标签内引入，将DOM操作代码包裹在DOM加载完成的回调函数中：

document.addEventListener('DOMContentLoaded', function() {
  // 修正选择器后绑定事件
  document.querySelector('#loan-form').addEventListener('click', calculateResults)
  // 其余DOM操作代码统一放在该回调内
})

场景3：SSR框架下触发报错 #

将DOM操作代码放到仅客户端执行的生命周期钩子中运行，比如Next.js中使用useEffect钩子，Nuxt.js中使用onMounted钩子，确保代码仅在客户端浏览器环境下执行。

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