Member Avatar for Violet_82

Hi there, I am running a few test and trying to practice a bit with javascript
I have come up with a script which is meant to swap images but it is producing errors. I had tried to debug with firebug but it is not going well at all and I am not quite sure what i have done wrong. I have done a similar script before but this time it is external and the function call is within the script itself, so nothing withing the html.
Anyway, here's what I came up with: antobbo.webspace.virginmedia.com/test/test.htm
the script code is here - external script script.js:

var all_images = new Array (
    "animal_full_1.jpg",
    "animal_full_2.jpg",
    "animal_full_3.jpg",
    "animal_full_4.jpg",
    "animal_full_5.jpg",
    "animal_full_6.jpg",
    "animal_full_7.jpg",
    "animal_full_8.jpg",
    "animal_full_9.jpg",
    "animal_full_10.jpg",
    "animal_full_11.jpg",
    "animal_full_12.jpg"
);


var frame = 0;

function swapImages(){

    setInterval("animate()", 5000);
    var image = document.getElementById("the_image");



}

    function animate(){
        frame +=1;

        if(frame > all_images.length){

            frame = 0;

        }
    image.src = all_images[frame];

    }

swapImages();

When I open the page in firefox nothing happens...any idea please?
Firefox comes back with:

"image is not defined
image.src = all_images[frame]; "

Edited by Violet_82 because: I forgot to include "document." in the method
  • 2 Contributors
  • 3 Replies
  • 120 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by Violet_82

Recommended Answers

All 3 Replies

Member Avatar for urtrivedi

remove line 20 and copy it to line number 18 (declare image outside swap funciton like you do for frame variable)

var image = document.getElementById("the_image");
Member Avatar for Violet_82

Hi urtrivedi, I have tried that to no avail. I made some more testing and turned out that the same script (with your change)

var all_images = new Array (
    "animal_full_1.jpg",
    "animal_full_2.jpg",
    "animal_full_3.jpg",
    "animal_full_4.jpg",
    "animal_full_5.jpg",
    "animal_full_6.jpg",
    "animal_full_7.jpg",
    "animal_full_8.jpg",
    "animal_full_9.jpg",
    "animal_full_10.jpg",
    "animal_full_11.jpg",
    "animal_full_12.jpg"
);

var image;
var frame = 0;

function swapImages(){

    setInterval("animate()", 500);
    image = document.getElementById("the_image");



}

    function animate(){
        frame +=1;

        if(frame > all_images.length){

            frame = 0;

        }
    image.src = all_images[frame];

    }

works only if I call the script from the html and remove the call to the function in the script itself.
So now I am calling the function directly from the body <body onload = "swapImages()">.
I have got the sneaky suspicion that the script doesn't work because the dom isn't ready, whereas if I call from body everything is ready...could that be the case?

Member Avatar for Violet_82

Sorry I have run another test, which perhaps (?) confirms that the problem is with the dom. I have created another div called more_text. This is displayed but then I have created a script to hide it id javascript is on. So here's the script:

function no_script(){
var info_div = document.getElementById('more_info');
info_div.style.display = "none";
}
no_script();

and here's the relevant css:

#more_info
    {
        border:1px solid red;
        width:400px;
        height:400px;
        position:absolute;
        left:900px;
        top:300px;

    }

So originally I called the external script from the head section <script type = "text/javascript" src = "script_navigation.js"> </script>. It didn't work at all. But if I remove the function call from the bottom of the script no_script(); and place it in the body tag of the html file, the script works perfectly.
I think I am getting a bit confused here as to whether calling a script just from the head section is possible or not. If I want to hide something in the html, why do I have to call a function from the body waiting that everything loads up? What if I want to hide something before it loads (this I think is extremely important because say there are things in the page that I want to hide straight away so that users don't see it untill I change it with a script: this seems not to be possible. I don't want visitors to see briefly the elements I am trying to hide with the script I just want it to hide before they can see it. How do I achieve that then? If I put the call in the onload I have to wait for the page to load first....any idea? )

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.