0

一連の .gif 画像を格納するために使用される配列を作成しました。 document.getElementById を使用して .src 値を変更してすべてをテストしようとしていますが、値を変更してページをロードすると、画像が残ります以前と同じです。

    function setImage()
    {
    var images = new Array();
    images[0] = anemone.gif; 
    images[1] = ball.gif;
    images[2] = crab.gif;
    images[3] = fish2.gif;
    images[4] = gull.gif;
    images[5] = jellyfish.gif;
    images[6] = moon.gif;
    images[7] = sail.gif;
    images[8] = shell.gif;
    images[9] = snail.gif;
    images[10] = sun.gif;
    images[11] = sunnies.gif;
    images[12] = whale.gif;

    var slots = new Array();
    slots[0] = document.getElementById("slot" + 0);
    slots[1] = document.getElementById("slot" + 1);
    slots[2] = document.getElementById("slot" + 2);
    slots[0].src = "snail.gif";
    document.getElementById('slot0').src = images[0];
    alert(images.length);
    }

画像が変わらない理由はわかりませんが、非常に単純なものでなければならないことはわかっています。この 1 つのことを変更しようとして何時間も無駄にしましたが、何も機能しません。誰かが私のやり方の誤りを指摘できますか?

4

1 に答える 1

1

コードにはいくつかの問題があります。

ファイル名は文字列である必要があるため、引用符で囲む必要があります (配列の作成を簡素化することもできます)。

var images = ['anemone.gif', 'ball.gif', 'crab.gif', 'fish2.gif', 'gull.gif', 'jellyfish.gif', 'moon.gif', 'sail.gif', 'shell.gif', 'snail.gif', 'sun.gif', 'sunnies.gif', 'whale.gif'];

また、slot要素を正しく取得していることを確認し、次のようなすべての属性を引用してください。

<img id="slot0" class="slot" src="crab.gif" width="120" height="80">

slots-Arrayを作成すると、次のように実行できます (ID 文字列を連結する必要はありません)。

var slots = [document.getElementById('slot0'), document.getElementById('slot1'), document.getElementById('slot2')];

最後に、ドキュメントが読み込まれたとき、または DOM の準備が整ったときに、必ず関数を呼び出してください。jQuery のようなフレームワークを使用したくない場合、最も簡単な方法はおそらく引き続き使用することwindow.onloadです。

window.onload = setImage; //note that the parens are missing as you want to refer to the function instead of executing it

配列、window.onload、および DOMReady に関する詳細情報:

于 2012-10-07T10:31:44.213 に答える