我正在尝试执行将第一个文本框的值复制到第二个文本框的简单任务
这是我的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 未捕获的类型错误：无法读取 null 的属性（读取“值”） 在文本复制 (1.js:6:25) 在 HTMLInputElement.onkeyup (1.html:7:73)
如果我在函数内声明text1和text2，我不会收到错误并且它可以正常工作，那么为什么当我将它们声明为全局变量时它不起作用？
谢谢。
您的元素在脚本运行时不存在。这就是为什么人们将脚本文件放在正文的末尾，而不是放在头部。您还可以使用
defer<script src="script.js" defer></script>获取元素的速度比 HTML 渲染元素的速度快，这就是 JS 无法在 DOM 中找到它们的原因。将脚本移至
body<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>
window.addEventListener("DOMContentLoaded", (event) => {
const text1 = document.getElementById("textbox1");
const text2 = document.getElementById("textbox2");
function TextCopy() {
text2.value = text1.value;
}
});
您的脚本在页面完全加载之前执行，为了强制 javascript 等待 DOM 完全加载，您必须在脚本标签中使用 defer 关键字
<html>
<head>
<link rel="stylesheet" href="Style.css">
<script src="1.js" defer></script>
</head>
<body>
textbox1: <input id="textbox1" onkeyup="TextCopy()" type="text"> <br>
textbox2: <input id="textbox2" type="text">
</body>