javascript文档.getElementById(''）.value返回null

javascript document. getElementById('').value returns null

本文关键字：value 返回 null 文档 getElementById javascript      更新时间：2023-09-26

如果我直接将方法document.getElementById插入方法setTimeout，则工作良好

1.

<!DOCTYPE html>
<html>
<body>
<p>Click the button to wait 3 seconds, then alert "Hello".</p>
<button onclick="myFunction()">Try it</button>
<script>

function myFunction() {
    setTimeout(function(){ alert("Hello"); }, document.getElementById("numbers").value);
}
</script>
<input id="numbers" type="textbox"  />
</body>
</html>

2.

<!DOCTYPE html>
<html>
<body>
<p>Click the button to wait 3 seconds, then alert "Hello".</p>
<button onclick="myFunction()">Try it</button>
<script>
var numbers = document.getElementById("numbers").value
function myFunction() {
    setTimeout(function(){ alert("Hello"); }, numbers);
}
</script>
<input id="numbers" type="textbox"  />
</body>
</html>

为什么第二个不起作用？我认为var numbers返回null，但我不知道为什么。

页面加载时正在执行var numbers = document.getElementById("numbers").value行，numbers还不存在。

在第一个版本中，当点击事件触发并调用附加的处理程序时，您将检索元素及其值。在那一刻，输入字段有一个返回的值。

在第二个版本中，当DOM中不存在输入字段时，您将检索输入元素及其值，因此在调用处理程序时使用null。显然你应该选择前者。

正如@gmiley所说，数字还不存在。您应该包括：

var numbers = document.getElementById("numbers").value

在您的功能内部。

此外，顺便说一句。。。将javascript放在文件中间可能不是最好的做法。我几乎看不到"script"标记后面的"input"。

相关文章：