Javascript：一个变量包含值，但萤火虫表示它为空

当我点击按钮时，没有任何反应。萤火虫说： “类型错误：btnNew为空”Javascript：一个变量包含值，但萤火虫表示它为空

我的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”）？

来源

2015-01-20 Thomas H.

代码你等待文件加载？（例如，“btnAdd”存在） – 2015-01-20 18:54:37

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()的差异。

来源

2015-01-20 18:55:14 Thierry

只需在页面底部加载或定位脚本（就在关闭body标签之前）通常也足以确保该元素存在于DOM中，并准备好相互作用。还有DOMContentLoaded事件（https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded），如果jQuery不可取，则可以使用它（在支持的地方）。 – pwdst 2015-01-20 20:34:45

太棒了，谢谢 – 2015-01-20 20:35:03

你可以使用体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>

来源

2015-01-20 19:02:33

Javascript：一个变量包含值，但萤火虫表示它为空

回答

相关问题