image array and .src - image not changing

Question

I have created an array which is being used to store a series of .gif images and I'm just trying to test everything out by using document.getElementById to change the .src value but when I change it and load the page the image stays the same as it was before.

    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);
    }

I can't understand why the image wont change, but I know it has to be something very simple. I've been wasting hours trying to get this one thing to change but nothing works. can anyone please point out the error of my ways?

Your filenames need to be strings, quote them like `'anemone.gif'` — m90, Oct 07 '12 at 10:02
Are you actually calling your function? In case yes, are you doing that on `DOMReady` or something similar? Are the elements that you are storing in `slots` actually image nodes? Do you get error messages in your console? — m90, Oct 07 '12 at 10:07
the function is being called yes, I'm assuming that because I dont know what DOMReady is that I'm not using it, and I THINK the elements are image nodes, and there are no errors in firebug. This is an example of one of the slots in the code- — Nathan Alexander Goodger, Oct 07 '12 at 10:09
When you put a piece of JS just somewhere in your document it will be executed immediately. In this case it might happen that the browser is still working on the creation of the DOM, therefore the elements you are trying to select (`getElementById`) do not exist yet, so your function call does nothing. Easiest plain JS way to have your browser wait until the page has been created would be using `window.onload = setImage;` but this is a pretty complex area, read a little about it here: https://developer.mozilla.org/de/docs/DOM/window.onload — m90, Oct 07 '12 at 10:15
there has to be a way to fix it, I can't use any code that falls outside of my study materials. is it something to do with the .gif filetype? nobody else in my course has posted any questions regarding this so I know it's a very simple error I just can't find my way around it. — Nathan Alexander Goodger, Oct 07 '12 at 10:33
It's hard to tell just from the JS code you posted, it might be good to produce a [jsfiddle](http://jsfiddle.net) that reproduces your problems. — m90, Oct 07 '12 at 10:39
here is the jsfiddle, I'm not sure if I've created it correctly.. http://jsfiddle.net/UFNsv/ — Nathan Alexander Goodger, Oct 07 '12 at 10:43
What are you trying to achieve by doing this: `document["slot0"].src = anemone.src;`, Other than that it is working: http://jsfiddle.net/UFNsv/3/ sets the first img's source to `gull.gif` — m90, Oct 07 '12 at 10:51
hang on.... I saved a copy of the file with a different name so I could go back if I made any major mistakes moving things around and have been reloading the old file each time I saved the new one with changes. what's the penalty around here for ultimate n00bery? — Nathan Alexander Goodger, Oct 07 '12 at 10:59

score 1 · Answer 1 · edited May 23 '17 at 10:24

There are a couple of issues with your code:

Your filenames need to be Strings, so they'll have to be quoted (also you can simplify the Array creation):

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'];

Also make sure you are getting your slot-elements right, quote all the attributes like:

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

When you create the slots-Array you can do it like this (no need to concat the ID string):

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

Finally make sure you call your function when the document has loaded / the DOM is ready. If you don't want to use a framework like jQuery your easiest bet is probably still using window.onload:

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

Further reading on Arrays, window.onload and DOMReady:

image array and .src - image not changing

1 Answers1