Question

I have transformed a custom image header into an image rotator by using this tutorial to build the rotator script from scratch: http://fearlessflyer.com/2012/12/how-to-create-a-jquery-image-rotator. I went step by step through the tutorial to type the code, but when I try to run, the Firebug console gives this error:

ReferenceError: rotateImages is not defined

xx = setInterval(‘rotateImages()’, 4000);

Thinking that I might have mistyped a line of code, I copied the script from the working demo, and I received the same error.

I am running this script in a .js file:

(function($) {
$(document).ready(function() {

    //loop through pictures
    $('.headerpic_inner').each(function(e) {
        if(e == 0) {
            $(this).addClass('current');
        }

        $(this).attr('id', 'handle' + e);

    });


    //loop through tags
    $('.tabs li').each(function(e) {
        if(e == 0) {
            $(this).addClass('current');
        }

        $(this).wrapInner('<a class="title"></a>');
        $(this).append('<a><img /></a>');
        $(this).children('a').attr('href', '#handle' + e);
        y = $('#handle' + e + ' img').attr('src');
        $(this).find('img').attr('src', y);
        t = $(this).children('a').text();
        $('#handle' + e).append('<h2>' + t + '</h2>');

    });


    //change image on click
    $('.tabs li a').click(function() {

        c = $(this).attr('href');
        if($(c).hasClass('current')) {
            return false;
        } else {
            showImage($(c), 20);
            $('.tabs li').removeClass('current');
            $(this).parent().addClass('current');
            return false;
        }

    });




    //call to rotate images
    runRotateImages();
    $('#headerpic').hover(function() {
        clearTimeout(xx);
    },
    function() {
        runRotateImages();
    });





}); //end of $(document).ready function



//showImage function
function showImage(img, duration) {
    $('.headerpic_inner').removeClass('current').css({
        'opacity' : 0.0,
        'zIndex' : 2,
    });

    img.animate({opacity:1.0}, duration, function() {
        $(this).addClass('current').css({zIndex:1});

    });

}


//rotateImages function
function rotateImages() {
    var curPhoto = $('div.current');
    var nxtPhoto = curPhoto.next();
    var curTab = $('.tabs li.current');
    var nxtTab = curTab.next();

    if(nxtPhoto.length == 0) {
        nxtPhoto = $('#headerpic div:first');
        nxtTab = $('.tabs li:first-child');
    }

    curTab.removeClass('current');
    nxtTab.addClass('current');
    showImage(nxtPhoto, 300);

}

//runRotateImages function
function runRotateImages() {
    xx = setInterval('rotateImages()', 4000);
}




})(jQuery);

Can anyone tell me why it would say that rotateImages() is not defined?

Answer 1

The other answers provided a fix but they didn’t explain why your code doesn’t work. I’ll have a stab:

setInterval() can actually take a quoted argument as a string, your original code is actually syntactically correct:

xx = setInterval('rotateImages()', 4000);

So why doesn’t it work? When you pass the argument with quotes, the setInterval() call will look in the global scope for the function rotateImages(). The problem is, your function rotateImages() is defined within a closure. Your entire code is wrapped using:

(function($) {
    $(document).ready(function() {


    });
})(jQuery);

The suggested fix setInterval(rotateImages, 4000) works because when you pass the function name without quotes and without parenthesis, setInterval() will first look in the local scope for the function, where it finds the function and can call it.