Question

如果我直接在方法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，但我不知道为什么。

Answer 1

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

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

Answer 2

正在对您网页的加载执行第var numbers = document.getElementById("numbers").value行，numbers尚不存在。

Answer 3

就像@gmiley所说，数字还没有存在。你应该包括：

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

你的功能内部。

另外，在旁注中......将javascript放在文件中间可能不是最佳选择。我差点没看到＆＃39;输入＆＃39;在＆＃39;脚本＆＃39;之后标签

javascript文档。 getElementById（＆＃39;＆＃39;）。value返回null

3 个答案: