Uncaught referenceError on a function

Question

I am following a simple tut which will hopefully build out a responsive slider, however it keeps telling me there is an error in the console pointing at a function called advance()

Here is the simple html for the slider:

<div class="slider">
<div class="slide-viewer">
    <div class="slide-group">
        <div class="slide slide-1">1</div>
        <div class="slide slide-2">2</div>
        <div class="slide slide-3">3</div>
        <div class="slide slide-4">4</div>
    </div>
</div>
</div>
<div class="slide-buttons"></div>

Here is the JS - JQuery has been included before the script file so I know that isn't the issue here but when I click a button it shows me the error in the console:

$(document).ready(function(){
$('.slider').each(function(){
    var $this = $(this);
    var $group = $this.find('.slide-group');
    var $slides = $this.find('.slide');
    var buttonArray = [];
    var currentIndex = 0;
    var timeout;

    function advance(){
        clearTimeout(timeout);

        timeout = setTimeout(function(){
            if (currentIndex < ($slides.length - 1) ){
                move(currentIndex + 1);
            } else {
                move(0);
            }
        }, 4000);
    }

    $.each($slides, function(index){
        var $button = $('<button type="button" class="slide-btn">&bull;</button>');
        if(index === currentIndex) {
            $button.addClass('active');
        }
        $button.on('click', function(){
            move(index);
        }).appendTo('.slide-buttons');
        buttonArray.push($button);
    });

advance();

});

function move(newIndex) {
    var animateLeft, slideLeft;

    advance();

    if ($group.is(':animated') || currentIndex === newIndex) {
        return;
    }

    buttonArray[currentIndex].removeClass('active');
    buttonArray[newIndex].addClass('active');

    if (newIndex > currentIndex) {
        slideLeft = '100%';
        animateLeft = '-100%';
    } else {
        slideLeft = '-100%';
        animateLeft = '100%';
    }

    $slides.eq(newIndex).css( {left: slideLeft, display: 'block'} );
    $group.animate( {left: animateLeft} , function() {
        $slides.eq(currentIndex).css( {display: 'none'} );
        $slides.eq(newIndex).css( {left: 0} );
        $group.css( {left: 0} );
        currentIndex = newIndex;
    });
}
});

It tells me the issue is on line 40 of the Js which points towards the second time you see advance() in the script. any help would be appreciated as I had to amend the code already as some of it was failing but this has me stumped! Granted Js isn't my strongest language!

Answer 1

The problem is that function advance(){ is within the foreach scope. It is called within your move() function which is not in the same scope.

The easiest would be to move your move method just below your advance function:

    function advance(){
        clearTimeout(timeout);

        timeout = setTimeout(function(){
            if (currentIndex < ($slides.length - 1) ){
                move(currentIndex + 1);
            } else {
                move(0);
            }
        }, 4000);
    }

    function move(newIndex) {
    //code for move function here