getElementById() isn't working

[korin43]

So basically I have this code:

Javascript:

var virtualbag = document.getElementById('VirtualBagImage');

HTML:

<img id="VirtualBagImage" src="virtualbag.php?bag=1&fabric=75&trim=24&hardware=6&width=150" />

The goal is to be able to change the source with virtualbag.src = somethingelse; but if I do this the script stops executing (and of course, javascript never gives any error message).
alert(virtualbag); says "null".

I'm hoping I'm just missing something obvious.. I don't have much experience with javascript but I don't understand what's wrong.

Thanks for any help.

[DanielDude]

that dosen't look like an image URL...

[DanielDude]

and you can't put images in alerts.

[korin43]

php can generate images (a png in this case). The image actually works perfectly, I just can't change it.

I used the alert to see if it's finding anything, getElementById() is supposed to return null if it can't find anything. I assume it would give something different if it found it. The main thing is that virtualbag.src = newurl; doesn't work.

[astupidname]

Are you trying to access the image before the window has fully loaded?? Try:

window.onload = function () {
    var virtualbag = document.getElementById("VirtualBagImage");
    if (virtualbag !== null) {
        alert(virtualbag.src);
        //virtualbag.src = //insert your path or variable here
    } else {
        alert("can't find VirtualBagImage! Id must be wrong!");
    }
};

[korin43]

Tried this.. It gives the error message ("can't find VirtualBagImage..")

[A1ien51]

You only have one id with that value right?
Do you have any thing with the same name?

You are 100% positive the spelling is right.

Eric

[korin43]

Oh hey actually that fixed it. I just didn't test it right. Thanks a lot I just needed it to run after the page loaded..