CODEWITHSUNDEEP
javascripthtmlslideshow
Lemons
Lemons

Reputation: 176

Javascript slideshow with caption issues

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.

Upvotes: 4

Views: 808

Answers (2)

Paul D.
Paul D.

Reputation: 2022

attr() is a method brought by JQuery. If you are not using JQuery, you should keep using img.src. Another thing I noticed that might cause trouble : when you read .src from your image, you get the full path as a return (including your domain). Your conditions would then become :

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

( And I just checked to be sure : http://www.w3schools.com/jsref/prop_img_src.asp mentions that the return value of img.src includes protocol and domain )

Also I think you should either define your function CaptionSlide inside moveToNextSlide so that it gains access to the updated img variable or not declare your img variable inside the moveToNextSlide function (so that the global variable gets updated instead)

Another point : you should make sure the DOM is loaded before querying elements from it (such as img) . To do so, wrap your code in a function, and assign it to the window.onload event :

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);
}

and HTML for button : 

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

Upvotes: 1

Shoaib Chikate
Shoaib Chikate

Reputation: 8973

Replace all img.attr('src') by img.src=="your image name".

For example:

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

As you are using pure JavaScript,you cannot use attr() which is method of JQuery.

Upvotes: 1

Related Questions