8

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

<!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 时，它工作得非常好！！！为什么是这样？

4

5 回答 5

17

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

于 2012-05-29T21:49:14.277 回答
2

JavaScript 从上到下解释。<script>所以在你执行的地方，还没有h1已知的标签。

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

<script type="text/javascript">
    function onLoadHandler() {
         // your original javascript code here...
    }
</script> 
<body onload="onloadHandler()">
<!-- HTML Code here-->
于 2012-05-29T21:51:52.143 回答
1

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

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

于 2012-05-29T21:49:57.160 回答
1

在加载 dom 之前执行 head。把它放在页面的按钮上或者在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>
于 2012-05-29T21:50:39.567 回答
0

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

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

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

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

于 2012-05-29T21:51:56.003 回答