Javascript &引用；getElementsByTagName（…）[0]”；是未定义的吗？_Javascript_Html_Events

Javascript &引用；getElementsByTagName（…）[0]”；是未定义的吗？

javascript html events

Javascript &引用；getElementsByTagName（…）[0]”；是未定义的吗？,javascript,html,events,Javascript,Html,Events,我有以下代码，基本上可以在一组图像之间切换 <!DOCTYPE html> <html> <head> <script type="text/javascript"> var num = 1; img = document.getElementsByTagName("img")[0]; hbutton = document.getElementsByTa

我有以下代码，基本上可以在一组图像之间切换

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

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

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

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

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

在加载dom之前执行head。把它放在页面的按钮上，或者在body标签中放一个onload函数

当文档还没有准备好时，它无法找到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>


函数onDocumentReady（）{
var-num=1；
img=document.getElementsByTagName（“img”）[0]；
hbutton=document.getElementsByTagName（“h1”）[0]；
hbutton.onclick=函数（）{
num+=1；
img.src=num+“.jpg”；
}
}  
按这里！

或者干脆这样做：

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


按这里！
var-num=1；
img=document.getElementsByTagName（“img”）[0]；
hbutton=document.getElementsByTagName（“h1”）[0]；
hbutton.onclick=函数（）{
num+=1；
img.src=num+“.jpg”；
}

JavaScript是自上而下解释的。因此，在执行

的地方，还没有已知的

h1

标记

尝试将

-标记放在页面底部。否则，如果您需要页面开头的脚本，onLoad处理程序可能会有帮助：

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


函数onLoadHandler（）{
//您的原始javascript代码在这里。。。
}

问题在于，在页面加载过程中遇到脚本时，脚本会立即执行

由于它位于页面的顶部，在页眉中，这意味着它是在页面加载

元素（或正文的任何其他部分）之前执行的

因此，当它请求

getElementsByTagName（'h1'）

时，此时没有任何匹配的元素

您需要： *将代码移到脚本的末尾。

*或者将其包装在一个函数中，并在页面完成加载后触发函数执行——即使用

onload

方法。

更具体地说，

document.getElementsByTagName（“h1”）[0]

未定义的，因为正如@Julian所说，当代码运行时，标签不存在。当您尝试将onclick
设置为undefined
时，会出现错误。这并不奇怪，应该是。。。我用真实的症状更新了标题。查找与getElementById
和undefined
相关的问题。这是相同的想法。哎呀，这与getElementById
（查找）略有不同。在这种情况下，存在未定义，因为getElementsByTagName
返回一个空数组[-like]对象，所以emptyArray[0]
导致未定义。在任何情况下，请参阅其他问题。的可能重复
<script type="text/javascript">
    function onLoadHandler() {
         // your original javascript code here...
    }
</script> 
<body onload="onloadHandler()">
<!-- HTML Code here-->