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

head は、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>
于 2012-05-29T21:50:39.567 に答える
0

問題は、ページの読み込み中にスクリプトが発生するとすぐに実行されることです。

これはページの上部のヘッダーにあるため、ページが<h1>要素 (または本文の残りのいずれか) をロードする前に実行されることを意味します。

したがって、 を要求するとgetElementsByTagName('h1')、その時点で一致する要素はありません。

次のいずれかを行う必要があります。 * コードをスクリプトの最後に移動します。* または関数でラップし、ページの読み込みが完了したときに関数を実行するようにトリガーします。つまり、onloadメソッドを使用します。

于 2012-05-29T21:51:56.003 に答える