getElementById（）は常にNULLステータスを表示しています

イベントハンドラについてはJavaScriptのレッスンを受けていますが、開始時には非常に基本的なものがgetElementById()です。以下は私のHTMLとJavaScriptコードです。次のコードにはイメージタグもありますが、私は新しいユーザーであるため、正確な方法で投稿することができませんでした。したがって、srcタグを完全に苦情とみなすことを検討してください。getElementById（）は常にNULLステータスを表示しています

<div class="considerVisiting"> 
    <img src="images/bq-twitter" id="mainImage" alt="BeQRious Twitter"> 
</div>

、ここでJavaScriptのコードです：

var myImage = document.getElementById("mainImage"); 
var imageArray = [images/1-btn, images/download-as-you-like]; 
var imageIndex = 0; 

function changeImage() { 

    myImage.setAttribute("src",imageArray[imageIndex]); 
    imageIndex++; 

    if (imageIndex >= imageArray.length) { 
    imageIndex=0; 
    } 
} 

setInterval(changeImage, 5000);

このコードはmainImageピクチャー5秒ごとに変更されます。しかし、私が直面している問題は、MozillaでFireBugを使ってこのスクリプトを実行すると、以下のようになります：

> Error : myImage is Null

スクリプトに関しては何も起こりません。

出典

2011-12-14 Abbas

JavaScriptが実行される前にDOM *に要素が存在しますか？（ブラウザがブラウザに遭遇するとすぐにJavaScriptが実行されることに注意してください）、 'document.ready'イベントハンドラでラップしましたか？あるいは、JSをページの最後の 'script'ブロックに入れてみましたか？それで、DOMを組み立てた後に実行されますか？ –

あなたの 'img'要素（あなたのソースにある）の属性が' id'ですか？ Internet ExplorerにはIDの代わりに名前に一致するバグがありますが、他のブラウザは正しく不平を言うでしょう。 – scunliffe

変更：

<img src="images/bq-twitter" **id="mainImage"** alt="BeQRious Twitter" />

へ：

<img src="images/bq-twitter" id="mainImage" alt="BeQRious Twitter" />

**有効ではありません。

出典

2011-12-14 23:27:48 PriorityMark

おそらく、私はそれが 'id'属性を強調する単なる手段だったと思っていました... –

.getElementById()は、指定されたIDの要素が存在しない場合はnullを返すと想定されているため、対象の要素が解析される前にスクリプトが実行されている場合は、正しく表示されます。ちょうど推測ですが、文書の<head>のスクリプトですか？ブラウザは、文書を上から下に解析している間に、ブラウザがそれに遭遇したときに実行されます（先頭を含む）。あなたのスクリプトは、ブラウザですでに解析されている要素、つまりドキュメントの上位/前の要素にしかアクセスできないので、体の一番下まで<script>セクションを移動すると（すべての要素の後になります）、それらにアクセスできるようになります。

もう1つの方法は、ドキュメントの "onload"または "document.ready"というコードを実行することです。 "onload"は、ドキュメント全体がロードされた後にのみブラウザが実行するイベントです。

として明らかに間違ってジャンプ唯一の他の事は、この行です：私は、これは文字列の配列であることを意味したと仮定し

var imageArray= [images/1-btn,images/download-as-you-like];

ので、このようにする必要があります：

var imageArray= ["images/1-btn", "images/download-as-you-like"];

出典

2011-12-14 23:53:20 nnnnnn

あなたのコードで

は、配列の値は、あるべき

> var imageArray = [images/1-btn, images/download-as-you-like];

つまり、文字列リテラルでなければなりません：

var imageArray = ['images/1-btn', 'images/download-as-you-like'];

また、理由がない限り、 'setAttribute'を使用しないでください。 'setAttribute'はバグで信頼できない場合があるため、代わりにDOMプロパティを使用します。そう、あなたが本当にDOMオブジェクトではなく、HTMLマークアップの属性のプロパティを設定しようとしているように読み取るためにも、より自然である：

> myImage.setAttribute("src",imageArray[imageIndex]);

は次のようになります。また

myImage.src = imageArray[imageIndex];

：

> if (imageIndex >= imageArray.length) { 
> imageIndex=0; 
> }

は、モジュラス演算子％を使用して管理することができる。

imageIndex = imageIndex % imageArray.length;

全体の機能がに削減することができます。

function changeImage() { 
    myImage.src = imageArray[index++ % imageArray.length]; 
}

また、クロージャを使用してグローバル変数を取り除くことができます。

var changeImage = (function() { 

    var myImage = document.getElementById("mainImage"); 
    var imageArray = ['images/1-btn', 'images/download-as-you-like']; 
    var imageIndex = 0; 

    return function() { 
     myImage.src = imageArray[index++ % imageArray.length]; 
    } 
}());

しかし、あなたは後に上記のコード要素を実行する必要がありますidがのmainImageがDOMに存在します（例：あなたは頭からそれを走らせることはできません）。関数を呼び出して、idをwindow.onloadを使用して渡す方が良いでしょう。

出典

2011-12-14 23:54:27 RobG

あなたの素晴らしい提案をありがとう...それは私を助けました:) :)感謝 – Abbas

私はすべての完璧な、 *スタック上のimgタグで使用されていたので、すべてが厳密にHTML4 Docタイプに従っていた他の重要な方法になりました...私が使用していたものは、スクリプトが頭に置かれたので、 DOMツリーに... 私はそれを修正し、それは働いた= Dもう一度ありがとう – Abbas

getElementById（）は常にNULLステータスを表示しています

答えて

関連する問題