JavaScript getElementByID（）不工作
为什么refButton在下面的JavaScript代码中得到null ？
<html> <head> <title></title> <script type="text/javascript"> var refButton = document.getElementById("btnButton"); refButton.onclick = function() { alert('I am clicked!'); }; </script> </head> <body> <form id="form1"> <div> <input id="btnButton" type="button" value="Click me"/> </div> </form> </body> </html>
在你调用你的函数的时候，页面的其他部分还没有被渲染，所以元素在那个时候是不存在的。 尝试调用你的函数window.onload也许。 像这样的东西：
<html> <head> <title></title> <script type="text/javascript"> window.onload = function(){ var refButton = document.getElementById("btnButton"); refButton.onclick = function() { alert('I am clicked!'); } }; </script> </head> <body> <form id="form1"> <div> <input id="btnButton" type="button" value="Click me"/> </div> </form> </body> </html>
您需要将JavaScript 放在主体标签的末尾。
它没有find它，因为它不在DOM中！
你也可以像下面这样将它包装在onload事件处理程序中：
window.onload = function() { var refButton = document.getElementById( 'btnButton' ); refButton.onclick = function() { alert( 'I am clicked!' ); } }
因为当脚本执行时浏览器还没有parsing<body> ，所以它不知道有一个指定了id的元素。
试试这个：
<html> <head> <title></title> <script type="text/javascript"> window.onload = (function () { var refButton = document.getElementById("btnButton"); refButton.onclick = function() { alert('Dhoor shala!'); }; }); </script> </head> <body> <form id="form1"> <div> <input id="btnButton" type="button" value="Click me"/> </div> </form> </body> </html>
请注意，您可以使用addEventListener而不是window.onload = ...来使该函数仅在整个文档被parsing后执行。
