JavaScript getElementByID()不起作用

Question

JavaScript getElementByID()不起作用

42

为什么以下JavaScript代码中的refButton会变成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>

- user366312

3个回答

16

你需要把 JavaScript 放在 body 标签的末尾。

之所以找不到它，是因为它还没有被添加到 DOM 中！

你也可以像这样将其包装在 onload 事件处理程序中：

window.onload = function() {
var refButton = document.getElementById( 'btnButton' );
refButton.onclick = function() {
   alert( 'I am clicked!' );
}
}

- Jacob Relkin

这是标准做法还是只是在这种情况下？ - user366312

标准做法是从页面加载时开始执行。 - Jacob Relkin

在构建DOM树之后运行脚本是标准做法。 - Paul Lammertsma

所以将所有脚本放在底部应该是安全的，对吗？ - user366312

1

不，只有当页面完全加载时，树才准备好了。由于<script>标签是文档的一部分，因此您的建议也不足够。我要么看一下JavaScript包，要么如果这对您的实现来说过于复杂，请查看此链接：http://www.javascriptkit.com/dhtmltutors/domready.shtml - Paul Lammertsma

1

@JMSA - 不一定。这完全取决于您需要它做什么，以及页面在整个渲染过程中的进展情况。将其附加到window.onload事件将确保页面中包含的所有文件（CSS、JS、图像）都已下载。如果您知道只需要在脚本标记上方呈现HTML，则肯定有效，但最好附加到事件并了解这些事件的含义。 - jaywon

5

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

- Bruno Reis

2

window.onload事件在整个文档被解析并且所有文件都被下载后才会触发。 - jaywon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jaywon · Accepted Answer

在你调用函数的时候，页面的其余部分还没有被渲染出来，因此该元素在这一点上并不存在。也许尝试在 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>