Javascript function is not defined

Question

Error is:

switchDiv is not defined

JSFiddle example here: http://jsfiddle.net/9s5Px/11/

Here is the HTML markup:

<div id="container">
    <div class="foo">
        <p>Div A</p>
    </div>

    <div class="foo">
        <p>Div B</p>
    </div>

    <div class="foo">
        <p>Div C</p>
    </div>
</div>

And the JavaScript:

$('.foo').fadeOut('fast');

var count = $('.foo').length;
console.log(count);

var currentItem = 0;

function switchDiv() {
    $('.foo').get(currentItem).fadeOut();
    if (currentItem < count - 1) {            
        $('.foo').get(currentItem + 1).fadeIn();
    }
    else {        
        $('.foo').get(currentItem).fadeOut();
        currentItem = 0;
        $('.foo').get(0).fadeIn();
    }        
}

setTimeout("switchDiv()", 5000 );

Joseph Silber · Accepted Answer · 2012-01-03 03:34:22Z

5

Your string of code that you pass in to setTimeout does not have access to your local closure. It is being evaled globally.

Pass it the function itself, not a string:

setTimeout(switchDiv, 5000);

See here, no errors.

answered Jan 3, 2012 at 3:34

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Only Bolivian Here Over a year ago

So without the parenthesis? Doesn't it need them as it's a function?

Joseph Silber Over a year ago

Your need parenthesis to call a function, not to pass it.

Joseph Silber Over a year ago

@AdamRackis - Thanks! Were you the one to take me over that threshold?

Adam Rackis Over a year ago

I was not, but I did send you to 10015 :-)

Ilia G · Accepted Answer · 2012-01-03 03:38:02Z

2

You have a scoping issue in your jsfiddle. Not sure about the actual code, but since you are not showing how that js is being I called I assume it is the same problem.

Note that jsfiddle will execute the code you specified inside $(document).ready() handler (see options on top left), and so you switchDiv will be defined in there. Where as your timeout is looking for switchDiv on global object, and is effectively this setTimeout("window.switchDiv()", 5000);

The solution is to either pass function reference to the setTImeout or define setTimeout in the global scope like this.

As a side note: The get() function returns actual DOM object. WHat you probably looking for is eq(), but note that eq is 1-based.

answered Jan 3, 2012 at 3:38

Ilia G

10.2k3 gold badges43 silver badges61 bronze badges

2 Comments

Alex Over a year ago

+1 Nice explanation, didn't realize that the code was running under a different context, $(document).ready(), from the options on the left...

Ilia G Over a year ago

@Xander The neat and confusing part is that adding $(document).ready() handler to jsfiddle explicitly will still work. That is because jQuery is smart enough to run ready handler immediately if the DOM is already ready.

nnnnnn · Accepted Answer · 2012-01-03 04:05:59Z

0

two issues here:

1.use

setTimeout(switchDiv, 5000);

instead of evaluating a string.

2.inside switchDiv, you used get function to return a dom element in a jQuery object, and thus the fadeIn and fadeOut methods are not applicable.

Modified src:

$('.foo').fadeOut('fast');

var count = $('.foo').length;
console.log(count);

var currentItem = 0;

function switchDiv() {
    $($('.foo').get(currentItem)).fadeOut();
    if (currentItem < count - 1) {            
        $($('.foo').get(currentItem + 1)).fadeIn();
    }
    else {        
        $($('.foo').get(currentItem)).fadeOut();
        currentItem = 0;
        $($('.foo').get(0)).fadeIn();
    }        
}

setTimeout(switchDiv, 5000 );

edited Jan 3, 2012 at 4:05

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

answered Jan 3, 2012 at 3:40

qiao

18.3k7 gold badges60 silver badges46 bronze badges

Collectives™ on Stack Overflow

Javascript function is not defined

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related