Javascript slideshow with caption issues

Viewed 799

So I am having issues with captioning my slide show using a javascript, can somebody let me know as to where I am going wrong. My code stands as this:

JavaScript Document

var index = 0;
var titles=[1,2,3,4,5];
var img = document.getElementById("img1");

function moveToNextSlide()
{
if (index >= 5){index = 0}
var img = document.getElementById("img1");
var slideName = "movieImages/img" + titles[index++] + ".jpg";
img.src=slideName;
CaptionSlide();

}


function CaptionSlide()
{

if( img.attr("src") == "movieImages/img1.jpg")
    document.getElementById("captionbar").innerHTML="Up!";
else if(img.attr("src") == "movieImages/img2.jpg")
    document.getElementById("captionbar").innerHTML="Monsters Inc";
else if(img.attr("src") == "movieImages/img3.jpg")
    document.getElementById("captionbar").innerHTML="Madagascar";
else if(img.attr("src") == "movieImages/img4.jpg")
    document.getElementById("captionbar").innerHTML="Finding Nemo";
else if(img.attr("src") == "movieImages/img5.jpg")
    document.getElementById("captionbar").innerHTML="Ice Age";
}

HTML document

<div class="slides">
    <img id="img1" src="">
</div>
<input type="image" src="images/Next.png" id="button" onClick="javascript:moveToNextSlide()" title="Next" >
<div id ="captionbar"></div>

Also to note, that I get this error within the "inspect element": Uncaught TypeError: Cannot call method 'attr' of null

REVISED

var index = 0;
var titles=[1,2,3,4,5];
var img = document.getElementById("img1");

function moveToNextSlide()
{
if (index >= 5){index = 0}
img = document.getElementById("img1");
var slideName = "movieImages/img" + titles[index++] + ".jpg";
img.src=slideName;
CaptionSlide();

}

function CaptionSlide()
{
    window.onload = function(){
    if( img.src === "movieImages/img1.jpg")
    document.getElementById("captionbar").innerHTML="Up!";
    else if(img.src === "movieImages/img2.jpg")
        document.getElementById("captionbar").innerHTML="Monsters Inc";
    else if(img.src === "movieImages/img3.jpg")
        document.getElementById("captionbar").innerHTML="Madagascar";
    else if(img.src === "movieImages/img4.jpg")
        document.getElementById("captionbar").innerHTML="Finding Nemo";
    else if(img.src === "movieImages/img5.jpg")
        document.getElementById("captionbar").innerHTML="Ice Age";
    }
}

The HTML Remains the same as before. No error references however function does not write the text whatsoever.

2 Answers
Related