CODEWITHSUNDEEP
javascript
Decisive Reason
Decisive Reason

Reputation: 137

"Uncaught TypeError: object is not a function" Error in javascript

I am having a small problem. I want to display a slideshow, but the images are not moving. When I check it in the console I get the error

Uncaught TypeError: object is not a function

Can someone please help me?

Here's my javascript code:

        var step=1;
 var images = [
"5c.jpg",
"5s.jpg",
"a65.jpg"

];

var slideshow = document.getElementById('slideshow');

 function slide(){   
    slideshow.src = images[step];
    if(step<3){
        step++;
    }
    else
        step=1;
    setTimeout("slide()",2500); 
 }

and my html file:

<html>
    <body>
        <img src="C:\Users\M.OAN\Desktop\Pics\Slideshow\5c.jpg" alt="images" name="slide" id="slideshow" onload="slide();"/>     
    </body>
</html>

Upvotes: 0

Views: 1072

Answers (2)

yosahr
yosahr

Reputation: 14

From Fiddling a bit, the source of the original error was that the name of the tag and the function were the same.

Upvotes: 0

Artem Petrosian
Artem Petrosian

Reputation: 2954

You can make Array with your image paths and then just iterate thru it:

HTML:

<img id="slideshow" src="http://placekitten.com/50/50" alt="images" name="slide"/>

JS:

var images = [
    "http://placekitten.com/100/100",
    "http://placekitten.com/100/50",
    "http://placekitten.com/50/100"
];

// get image element
var slideshow = document.getElementById('slideshow');

// in arrays index starts from 0
var step = 0;

setInterval(function(){

    slideshow.src = images[step];

    if( step < images.length-1 ){
        step++;
    } else {
        step = 0;
    }    

}, 2500 );

Demo fiddle

Btw, I recommend you to use relative paths instead of absolute, because you may have problems when you try deploy your site:

"Pics/Slideshow/5c.jpg"

instead of

"C:/Users/M.OAN/Desktop/Pics/Slideshow/5c.jpg"

Upvotes: 1

Related Questions