CODEWITHSUNDEEP
javascripthtmlslider
user5000215
user5000215

Reputation:

My self made slider doesn't work

I have a problem with my self made image slider, i get the error: Uncaught TypeError: Cannot set property 'src' of null

Edit: I have called all images like this: img1, img2, img3 etc with extension .jpg

this is my javascript code:

     // JavaScript Document
var imagecount = 1;
var total = 3;


window.setInterval(function slideA(x) 
{
    var Image = document.getElementById('img');
    imagecount = imagecount + x;
    if(imagecount > total) { imagecount = 1; }
    if(imagecount < 1) { imagecount = total; }
    Image.src = "images_slider/img" + imagecount + ".jpeg";
}, 5000);

function init() 
{
    slideA();
}

window.onload = init;


<div id="LandingImage">
    <img src="../images/landingimage.png" alt="LandingImage" width="100%"         height="100%"  />  
    </div>

Can someone help me with this? Thanks!

Kevin.

Upvotes: 2

Views: 70

Answers (3)

Vaune
Vaune

Reputation: 314

It appears that you are trying to iterate through a list of images by changing the source of an image. If so, refer to the following JS fiddle for an example:

https://jsfiddle.net/hqq1k2Lk/3/

I made a few changes, so let's go through it together. 

// JavaScript Document
var imagecount = 1;
var total = 3;


function slideA()
{
    //slideA starts the interval
    window.setInterval(function(){
        var myImage = document.getElementById('LandingImage');
        imagecount++;
        if(imagecount > total) { imagecount = 1; }
        if(imagecount < 1) { imagecount = total; }
        myImage.src = "images_slider/img" + imagecount + ".jpeg";            
    }, 5000);
}

function init() 
{
    slideA();
}

window.onload = init();

First, I moved your function call slideA outside the interval. Thus calling slideA(); will start the interval.

Next, I moved your ID LandingImage to the img element itself, so we can get the image from the DOM using document.getElementById('LandingImage');

Since you need to keep track of what image you're on, I elected to use imagecount as your counter. You can increment a number by 1 by using ++ such as imagecount++;

As others have pointed out Image is a protected object name in Javascript, so I renamed your variable to myImage

Lastly, in order to start the whole process, I added a function call to your window onload event. Whenever you want to call a function, remember to use ()

window.onload = init();

Upvotes: 0

Todd
Todd

Reputation: 1674

As another poster mentioned, do not use Image as your variable name.

To access the src attribute of the element, you use element.setAttribute('src', 'insert src here') not element.src.

Upvotes: 0

Sterling Archer
Sterling Archer

Reputation: 22425

Your html element does not have an id of img, you appear to be trying to select the tag name.

I also suggest not using Image as the variable name, since Image is an object name in JavaScript.

<img src="../images/landingimage.png" alt="LandingImage" width="100%" height="100%" id="img" /> <!-- id at the end, was missing -->

Upvotes: 1

Related Questions