Javascript：变量包含值但 Firebug 表示它为空

Question

当我点击按钮时，没有任何反应。 Firebug 表示 "TypeError: btnNew is null"

我的Javascript代码是：

function addNewItem(){
alert("Test")
};

var btnNew = document.getElementById("btnAdd");
btnNew.onclick = addNewItem;

而 html 是：

<input type = "text" id = "input">
<button id = "btnAdd">New item</button>

如果 btnNew 的值为 document.getElementById("btnAdd") 为什么 btnNew 为空？

Answer 1

function addNewItem(){
  alert("Test")
}


window.onload = function() {
  var btnNew = document.getElementById("btnAdd");
  btnNew.onclick = addNewItem;
}

<input type = "text" id = "input">
<button id = "btnAdd">New item</button>

您必须在加载文档后执行您的 js 代码。

在 window.onload 或 $document.ready() 中，如果您使用 jquery.

请参阅 window.onload vs $(document).ready() 了解差异。

Answer 2

你可以使用 body onload 事件

查看下面的代码

<!DOCTYPE html>
<html>
<body onload="myFunction()">

<input type = "text" id = "input">
<button id = "btnAdd">New item</button>

<script>
function myFunction() {
   function addNewItem(){
alert("Test")
};

var btnNew = document.getElementById("btnAdd");
btnNew.onclick = addNewItem;
}
</script>

</body>
</html>

Javascript：变量包含值但 Firebug 表示它为空

Javascript: a variable contains value but Firebug says it is null

javascript

null

onclick