Javascript Slideshow with Headers

Question

So, I am having problems with the subtitles of my slideshow using javascript, can someone tell me where I am going wrong. My code is as follows:

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>

It should also be noted that I get this error in the "checking element": Uncaught TypeError: Unable to call the attr method from 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";
    }
}

HTML Remains the same as before. However, no links to errors work, and the text is not written at all.

Answer 1

Replace everything img.attr('src')with img.src=="your image name".

For example:

img.src=="movieImages/img1.jpg"

JavaScript, attr(), JQuery.

Answer 2

attr() - , JQuery. JQuery, img.src. , , : .src , ( ). :

img.src === "http://yourdomain.com/movieImages/img1.jpg"

( , : http://www.w3schools.com/jsref/prop_img_src.asp , img.src )

, CaptionSlide moveToNextSlide, img img moveToNextSlide ( ​​ )

: , DOM (, img). window.onload:

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

    function moveToNextSlide()
    {
        ...
    }

    function CaptionSlide()
    {
        if( ... )
        ...
    }

    document.getElementById("button").addEventListener('click', moveToNextSlide);
}

HTML :

<input type="image" src="images/Next.png" id="button" title="Next" />