35

为什么会refButton进入null下面的 JavaScript 代码？

<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>
4

3 回答 3

77

在您调用函数时，页面的其余部分尚未呈现，因此该元素此时不存在。尝试调用你的函数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>
于 2009-12-02T00:28:43.083 回答
13

您需要将 JavaScript放在 body 标记的末尾。

它没有找到它，因为它还没有在 DOM 中！

您还可以将其包装在 onload 事件处理程序中，如下所示：

window.onload = function() {
var refButton = document.getElementById( 'btnButton' );
refButton.onclick = function() {
   alert( 'I am clicked!' );
}
}
于 2009-12-02T00:28:18.527 回答
4

因为脚本执行的时候浏览器还没有解析<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 = ...使该函数仅在整个文档被解析后才执行。

于 2009-12-02T00:32:47.270 回答