JS代码在CodeSandbox正常运行 VSCode本地报设置null的innerHTML错误

问题原因 #

script标签放在<head>内执行时，浏览器还未解析渲染<body>中的DOM元素，document.querySelector("#date")无法获取到还没加载的元素，返回值为null，调用innerHTML属性就会触发报错。CodeSandbox平台默认会对JS执行时机做处理，等DOM加载完成后再运行JS，因此相同代码在该平台可正常运行。

解决方案 #

你可以任选以下任意一种方法修复问题：

• 方案1：调整script标签位置
  将<head>中的<script src="source/script.js"></script>剪切，放到</body>结束标签的前一行，等所有DOM元素渲染完成后再加载执行JS。
• 方案2：给script标签添加defer属性
  修改<head>中的script标签为：

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

defer属性会告知浏览器等整个HTML文档解析完成后再执行对应JS文件，无需移动标签位置。

• 方案3：将JS逻辑包裹在DOM加载完成的事件回调中
  修改你的JS代码，把所有代码都包裹在DOMContentLoaded事件的回调函数内：

document.addEventListener('DOMContentLoaded', function() {
  // 此处粘贴你原有全部JS代码
})

该事件会在DOM完全加载解析完成后触发，可保证执行逻辑时所有元素都已存在可被正常获取。

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