Question

“getElementsByTagName(...)[0]”未定义？

2012-05-29

39281

javascript html events

我有以下代码，它基本上在一堆图像之间切换。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            var num = 1;
            img = document.getElementsByTagName("img")[0];
            hbutton = document.getElementsByTagName("h1")[0];
            hbutton.onclick = function() {
                num += 1;
                img.src = num + ".jpg";
            }
        </script>
    </head>
    <body>
        <h1>Press Here!</h1>
        <img src = "1.jpg"></img>
    </body>
</html>

出于某种原因，当我运行它时，什么也没有发生，因为我的 Firebug 控制台显示了以下错误。

    hbutton is undefined    
---
    hbutton.onclick = function() {

但是，当我在页面加载后仅运行 JS 时，它运行得非常好！！！为什么会这样？

Answer 1

您的代码在定义 h1 标签之前执行。您必须在 onload 处理程序中运行它，或将其放在 /body 之前

Answer 2

JavaScript 是从上到下解释的。因此，在 <script> 执行的位置，尚未发现任何 h1 标签。

尝试将 <script> 标签放在页面底部。否则，如果您需要在页面开头使用脚本，onLoad-Handler 可能会有所帮助：

<script type="text/javascript">
    function onLoadHandler() {
         // your original javascript code here...
    }
</script> 
<body onload="onloadHandler()">
<!-- HTML Code here-->

Answer 3

当您将其放在标题中时，您的 h1 尚未加载。hbutton 变为未定义，而不是对象。然后当您尝试设置 .onclick 时，它会中断，因为您无法设置未定义的属性。当您将代码放在正文中时，您的 h1 已经加载，因此代码可以按预期工作。

您可以通过将代码留在顶部来解决此问题，但仅在 onload 事件后调用它。