为何VSCode中存DOM元素到变量后设置innerText报错Uncaught TypeError？

问题原因 #

你的JS文件在<head>标签里加载执行时，浏览器还没解析渲染<body>里的DOM元素，此时document.getElementById("element")会返回null，后续在bruh()函数里访问change.innerText自然就触发了类型错误。

为什么两种写法/平台表现不同 #

• 把document.getElementById("element")放到函数内可以正常运行：因为点击按钮触发函数时，整个页面的DOM已经完全加载完成，能正确定位到目标元素。
• Replit平台能正常运行，大概率是因为平台的默认模板或加载机制自动调整了JS的执行时机（比如自动把脚本移到<body>末尾），而VS Code中直接打开本地HTML文件时，浏览器严格按照代码顺序执行，不会做额外处理。

解决方案 #

提供三种可行的修复方式：

1. 将JS脚本移到<body>末尾

让DOM元素先被解析渲染，再加载执行JS：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h1 id="element">number</h1>
        <button onclick="bruh()">Add Num</button>
        <!-- 脚本移到body最后 -->
        <script src="plm.js"></script>
    </body>
</html>

2. 监听DOM加载完成事件

修改plm.js，等待DOM完全加载后再获取元素：

let nr = 0
let change

// 监听DOM加载完成事件
document.addEventListener('DOMContentLoaded', function() {
    change = document.getElementById("element")
})

function bruh(){
    nr = nr + 1
    change.innerText = nr
}

3. 给<script>标签添加defer属性

保持脚本在<head>里，用defer让脚本等待DOM解析完成后再执行：

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

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