Question

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

<!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事件之后调用它。

Answer 4

在加载dom之前执行头部。将它放在页面的按钮上或在body标签中放置一个onload函数。

当Document尚未准备好时，它找不到document.getElementsByTagName（“img”），因为它还没有。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
          function onDocumentReady(){
            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 onload="onDocumentReady()">
        <h1>Press Here!</h1>
        <img src = "1.jpg"></img>
    </body>
</html>

或只是这样做：

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <h1>Press Here!</h1>
        <img src = "1.jpg"></img>
        <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>
    </body>
</html>

Answer 5

问题是在页面加载期间遇到脚本正在立即执行。

由于它位于页面的顶部，在标题中，这意味着它在页面加载<h1>元素（或正文的任何其余部分）之前执行。

因此，当它要求getElementsByTagName('h1')时，那个时刻没有任何匹配的元素。

您需要： *将代码移动到脚本的末尾。 *或将其包装在函数中，并在页面加载完成后触发函数执行 - 即使用onload方法。

“getElementsByTagName（...）[0]”未定义？

5 个答案: