全局变量获取DOM元素为null，文本框值复制功能失效原因咨询

问题描述 #

尝试实现将第一个文本框的值复制到第二个文本框的功能，代码及报错如下：

HTML代码 #

<html>
    <head>
         <link rel="stylesheet" href="Style.css">   
         <script src="1.js"></script>
    </head>
    <body>
        textbox1: <input id="textbox1" onkeyup="TextCopy()" type="text"> <br>
        textbox2: <input id="textbox2"  type="text">
    </body>
</html>

JS代码 #

const text1 = document.getElementById("textbox1");
const text2 = document.getElementById("textbox2");

function TextCopy() {
    text2.value = text1.value;
}

错误信息 #

1.js:6 Uncaught TypeError: Cannot read properties of null (reading 'value')
    at TextCopy (1.js:6:25)
    at HTMLInputElement.onkeyup (1.html:7:73)

将text1和text2声明在函数内部时功能正常，为何声明为全局变量时无法工作？

原因分析 #

核心问题是DOM加载顺序不匹配：

• 浏览器解析HTML是从上到下执行的，你的JS文件在<head>中引入，当JS代码执行document.getElementById时，<body>里的两个输入框还没被渲染到DOM树中，所以这两个全局变量拿到的都是null。
• 触发onkeyup调用TextCopy()时，代码试图访问null的value属性，因此抛出了类型错误。

函数内部正常的原因 #

当把getElementById移到TextCopy()内部时，函数只会在你输入内容触发onkeyup事件时执行，这时候整个页面的DOM已经完全渲染完成，输入框元素已经存在，自然能正常获取到元素对象并完成赋值。

全局变量方案的修复办法 #

如果想保留全局变量的写法，有两种常用解决方式：

1. 把script标签移到body末尾 #

修改HTML，将JS引入放在</body>之前，确保DOM渲染完成后再执行JS：

<html>
    <head>
         <link rel="stylesheet" href="Style.css">   
    </head>
    <body>
        textbox1: <input id="textbox1" onkeyup="TextCopy()" type="text"> <br>
        textbox2: <input id="textbox2"  type="text">
        <script src="1.js"></script>
    </body>
</html>

2. 监听DOM加载完成事件 #

在JS中通过DOMContentLoaded事件，确保DOM加载完成后再获取元素：

let text1, text2;
document.addEventListener('DOMContentLoaded', function() {
    text1 = document.getElementById("textbox1");
    text2 = document.getElementById("textbox2");
});

function TextCopy() {
    // 增加判断避免DOM未加载完成时的意外报错
    if (text1 && text2) {
        text2.value = text1.value;
    }
}

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