Javascript:变量包含值，但 Firebug 说它为 null

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") ，为什么它为 null ？

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 代码。

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

参见window.onload vs $(document).ready()差异。