JavaScript中ReferenceError: document未定义问题求助

嘿，我来帮你排查这个document相关的报错问题！这种情况我碰到过好多次，大概率是DOM加载顺序或者编辑器语法检查的小问题，咱们一步步来解决：

• 先确认JS文件的加载时机
  从你给出的HTML代码来看，<head>里只引入了CSS文件，没看到bill.js的引用。如果你是把JS脚本放在<head>标签里加载，那浏览器会先执行JS代码，这时候<body>里的DOM元素还没渲染出来，用document去获取元素自然会报错。
  最稳妥的解决方法是把JS脚本放在</body>标签的前面，确保DOM完全加载后再执行JS：

  </div> <!-- 结束calculator容器 -->
  </div> <!-- 结束container容器 -->
  <script src="bill.js"></script>
  </body>
  </html>
  

  要是你非得把JS放在<head>里，那就给代码套上DOM加载完成的监听：

  document.addEventListener('DOMContentLoaded', function() {
    // 所有涉及document的操作都写在这里面
    // 比如 let totalInput = document.getElementById('total-bill'); 这类代码
  });
  

• 排查Bracket编辑器的语法检查误报
  Bracket有时候会因为没识别到浏览器环境，把document当成未定义变量标红，但实际在浏览器里运行是正常的。你可以试试这两个办法：

  • 在bill.js的开头加一行注释，告诉编辑器这是浏览器环境：/* global document */
  • 检查一下你有没有装ESLint这类语法检查插件，要是有的话，在配置里开启浏览器全局变量的支持（比如在.eslintrc里设置env: { browser: true }）

• 检查代码拼写和元素匹配
  别忽略低级错误！确认你写的是document而不是拼错成documnet，同时要保证JS里获取的元素ID和HTML里的完全一致，比如HTML里是<input id="totalBill">，JS里就得写document.getElementById('totalBill')，大小写和字符都不能错。

• 用浏览器控制台看真实报错
  有时候编辑器的报错只是提示性的，实际运行可能没问题。你直接用Chrome或Firefox打开你的HTML文件，按F12打开开发者工具，切换到Console面板，这里的报错信息才是最准确的，能帮你快速定位问题。

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