javascript - Cannot set property 'src' of null - Stack Overflow

admin管理员组

文章数量:1241125

I am trying to rotate an image using javascript and I was trying some code I found on adobes website that does what I was looking for. When I run it it gives me the error: Uncaught TypeError: Cannot set property 'src' of null

It keeps repeating every 5 second interval which is the amount of time between each image

Here is the javascript:

 (function () {
        var rotator = document.getElementById('rotator');  // change to match image ID
        var imageDir = 'images/';                          // change to match images folder
        var delayInSeconds = 5;                            // set number of seconds delay
        // list image names
        var images = ['image2.jpg', 'image3.jpg', 'image4.jpg', 'image1.jpg'];

        // don't change below this line
        var num = 0;
        var changeImage = function () {
            var len = images.length;
            rotator.src = imageDir + images[num++];
            if (num == len) {
                num = 0;
            }
        };
        setInterval(changeImage, delayInSeconds * 1000);
    })();

and here is the html for the image:

<img src="images/image1.jpg" alt="rotating image" width="400" height="300" id="rotator" />

It shows the image1.jpg, but does not rotate it. Is there something blatantly obvious that I am not seeing? Wouldn't surprise me!

Thanks to anyone that can offer advice.

I am trying to rotate an image using javascript and I was trying some code I found on adobes website that does what I was looking for. When I run it it gives me the error: Uncaught TypeError: Cannot set property 'src' of null

It keeps repeating every 5 second interval which is the amount of time between each image

Here is the javascript:

 (function () {
        var rotator = document.getElementById('rotator');  // change to match image ID
        var imageDir = 'images/';                          // change to match images folder
        var delayInSeconds = 5;                            // set number of seconds delay
        // list image names
        var images = ['image2.jpg', 'image3.jpg', 'image4.jpg', 'image1.jpg'];

        // don't change below this line
        var num = 0;
        var changeImage = function () {
            var len = images.length;
            rotator.src = imageDir + images[num++];
            if (num == len) {
                num = 0;
            }
        };
        setInterval(changeImage, delayInSeconds * 1000);
    })();

and here is the html for the image:

<img src="images/image1.jpg" alt="rotating image" width="400" height="300" id="rotator" />

It shows the image1.jpg, but does not rotate it. Is there something blatantly obvious that I am not seeing? Wouldn't surprise me!

Thanks to anyone that can offer advice.

• javascript

Share Improve this question Follow asked Jun 21, 2013 at 13:56 Joe WJoe W 1,56766 gold badges2323 silver badges3737 bronze badges 7

• 2 Where's the script? You may be encountering this if it is in the head. – acdcjunior Commented Jun 21, 2013 at 13:58
• Try passing rotator in your private function in changeImage. – SenorAmor Commented Jun 21, 2013 at 13:58
• it is in the head in the <script></script> tags – Joe W Commented Jun 21, 2013 at 13:59
• 4 You need to wait for the DOM to be ready before you try and access elements. So, since your code's in the head, and is executed immediately, it tries to look for the #rotator element (in the body), which hasn't even been rendered yet, so the result of document.getElementById("rotator") is null, so of course you can't set the src property of null – Ian Commented Jun 21, 2013 at 14:01
• 2 Its trying to find an element with id rotator but it doesn't exist yet. Wrap it in a document ready event or run it after it has rendered – DickieBoy Commented Jun 21, 2013 at 14:01

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 7

When in the head (look at the console):

http://jsfiddle/m2wce/

This happens because you are declaring the closure and executing right away. When you execute it in the head, the DOM is not ready (in other words, the HTML below still hasn't been "mounted" by the browser, as it processes the page sequencially, from top to botto) and at the time of the execution the img tag does not yet exist (because it is down below in the HTML page).

When in the body, after the referenced img, it works:

http://jsfiddle/m2wce/1/

You need to place this code after your dom gets ready. i.e inside $(document).ready() or on window.onload. as:

window.onload=function(){
(function () {
    var rotator = document.getElementById('rotator');  // change to match image ID
    var imageDir = 'images/';                          // change to match images folder
    var delayInSeconds = 5;                            // set number of seconds delay
    // list image names
    var images = ['image2.jpg', 'image3.jpg', 'image4.jpg', 'image1.jpg'];

    // don't change below this line
    var num = 0;
    var changeImage = function () {
        var len = images.length;
        rotator.src = imageDir + images[num++];
        if (num == len) {
            num = 0;
        }
    };
    setInterval(changeImage, delayInSeconds * 1000);
})();

If you place that code inside anynomous function inside head (as you did), then it will not be able to load that image element from Dom because Dom would not be fully loaded at that time.

Your script is loaded before the body of your page, so the rotator element is not found. Remove the var rotator = ... line and put it inside the changeImage function instead:

(function () {
    var rotator;
    var rotatedImageId = 'rotator';           // change to match your HTML
    var imageDir = 'images/';
    var delayInSeconds = 5;
    // list image names
    var images = ['image2.jpg', 'image3.jpg', 'image4.jpg', 'image1.jpg'];

    // don't change below this line
    var num = 0;
    var changeImage = function () {
        if (!rotator)
            rotator = document.getElementById(rotatedImageId);
        if (!rotator)
            return;

        var len = images.length;
        rotator.src = imageDir + images[num++];
        if (num == len) {
            num = 0;
        }
    };
    setInterval(changeImage, delayInSeconds * 1000);
})();

I met this problems too.You can make document.getElementById(rotatedImageId) before you use that function. Another word,you can define rotator to gobal. This is how i solved this problem.

本文标签： javascriptCannot set property 39src39 of nullStack Overflow