Javascript recursion problem

Question

I am trying to write a function that will change between an array of images. What I have makes sense to me, but when I run it as it is below then the first image loads, then the second image loads at some point (the transparency doesn't change) and then nothing happens. Here is the javascript code:

        var image1 = new Image();var image2 = new Image(); var image3 = new Image();
        image1.src = "images/website6.jpg"; image2.src = "images/website7.jpg"; image3.src = "images/sunset.jpg";
        var images = new Array("images/website6.jpg","images/website7.jpg","images/sunset.jpg");
        /*document.slide.style.opacity = 1;
        document.slide.stylebg.opacity = 0;*/
        setTimeout(function() { fade(images,0); }, 2000);
        function delay(arr,num)
        {
            document.slide.src = arr[num % 3];
            document.slide.style.opacity = 1;
            document.slidebg.style.opacity = 0;
            document.slidebg.src = arr[(num+1)%3];
            var number = num + 1;
            setTimeout(function() { fade(arr,number); }, 2000);
        }
        function fade(arr,num)
        {
            /*alert('fadebefore ' + (document.slide.style.opacity).toString())*/
            document.slide.style.opacity -= 0.1
            /*alert('fade')*/
            document.slide.stylebg.opacity += 0.1
            if (document.slide.style.opacity == 0)
            {
                setTimeout(function() { delay(arr,num); }, 150);
            }
            else
            {
                setTimeout(function() { fade(arr,num); }, 1500);
            }
        }

The HTML is simple. I have two classes; style and stylebg . style sits in front of stylebg and then I change opacities and images as needed. The javascript seems logical to me, but it doesn't work as expected. Also worth noting is there are 3 comments. The first comment (line 3-4) is attemping to set the opacities to what they should be at the beginning. However, if I do this then I get even less progress than above: the first image loads and nothing else happens. The second two comments are used for debugging purposes. If I uncomment these then the image change occurs between the two alerts, which would seem to say the image change is caused by the opacity change.

So can anybody explain why it isn't doing what I expect it to? Thanks.

EDIT: Some more code:

HTML (This is the only part being affected):

<div style="position: relative;">
<img src="images/sunset.jpg" id="slide" />
<img src="images/website6.jpg" id="slidebg" />
</div>

CSS:

#slide{
    display:block;
    margin-left:5;
    margin-right:auto;
    border: 1px solid black;
    z-index: 1;
    top: 0px;
    position: relative;
}
#slidebg{
    display:block;
    margin-left:auto;
    margin-right:auto;
    border: 1px solid black;
    z-index: 0;
    top: 0px;
    position: absolute;
}

Answer 1

You can't just refer to page elements by "id" value like that; you have to use "document.getElementById()":

 var slideElement = document.getElementById('slide'), slidebgElement = document.getElementById('slidebg');

Then you'd work with "slideElement.style" etc. instead of "document.slide.style".

Answer 2

Answering for formatting's sake. I have not debugged to see what would work, but this makes more sense to me

If you want to use ID, use document.getElementById, if you want to use name, use document.images[imgname] or document.imagename You are mixing names and style too. document.slide.stylebg.opacity and such

This does something. Not sure it is what you want: http://jsfiddle.net/EcShW/2/

<div style="position: relative;">
<img src="images/sunset.jpg" id="slide" name="slide" />
<img src="images/website6.jpg" id="slidebg" name="slidebg" />
</div>


    var images = []; // can be more elegant, but this is simpler
    images[0]=new Image(); images[0].src="images/website6.jpg";
    images[1]=new Image(); images[1].src="images/website7.jpg";
    images[2]=new Image(); images[2].src="images/sunset.jpg"; 
    var tid1,tid2,tid3
    tid1=setTimeout(function() { fade(images,0); }, 2000);
    function delay(arr,num)
    {
        document.slide.src = arr[num % 3].src;
        document.slide.style.opacity = 1;
        document.slidebg.style.opacity = 0;
        document.slidebg.src = arr[(num+1)%3].src;
        var number = num + 1;
        tid2=setTimeout(function() { fade(arr,number); }, 2000);
    }
    function fade(arr,num)
    {
        document.slide.style.opacity -= 0.1
        document.stylebg.style.opacity += 0.1
        if (document.slide.style.opacity == 0)
        {
            tid3=setTimeout(function() { delay(arr,num); }, 150);
        }
        else
        {
            tid3=setTimeout(function() { fade(arr,num); }, 1500);
        }
    }

Answer 3

EDIT2

It works for me (chromium)

var images = new Array ();
images[0] = new Image();
images[0].src = "images/website6.jpg";
images[1] = new Image();
images[1].src = "images/website7.jpg";
images[2] = new Image();
images[2].src = "images/sunset.jpg";

function delay ( arr, num )
{
  slide.src = arr[num % 3].src;
  slide.style.opacity = 1;
  slidebg.style.opacity = 0;
  slidebg.src = arr[(num+1)%3].src;
  var number = num + 1;
  setTimeout(function() { fade(arr,number); }, 2000);
}

function fade(arr, num)
{
  if ( slide.style.opacity == 0 )
  setTimeout(function (){ delay(arr, num); }, 150);
  else
  {
    slide.style.opacity = (slide.style.opacity*10 - 1)/10 ;
    slidebg.style.opacity -= -0.1;
    setTimeout ( function(){fade(arr,num);}, 1500 );
  }
}
fade (images, 0);

---

AHA!

<img id="img_id"/> we can get by document.img_id , even in chromium

---

---

OK, OK, removed links to this WE TEACH YOU TO FAIL AT WEB DEV site..