I can't use my function in Javascript

Question

I'm getting error with my function change_slide(). ReferenceError: change_slide is not defined on line 24:1. My code is here:

$(document).ready(function() {

    function change_slide() {
        number = pclass.charAt(6);
        number = parseInt(number);

        if (number == 5) number = 1;
        else number++;

        $('.picks').removeClass(pclass);
        pclass = 'bgpick' + number;
        $('.picks').addClass(pclass);
    }

    var random = Math.floor((Math.random() * 5) + 1);
    var pclass = 'bgpick' + random;
    var number;
    $('.picks').addClass(pclass);
    setInterval('change_slide()', 3000);
    $('.next').on('click', function() {
        change_slide();
    });
});

change_slide() on click .next works, in setInterval doesn't work.

Have you tried to move the definition of change_slide outside of $(document).ready( .. ) — Patrick Barr, Aug 12 '16 at 19:18
I thought setInterval takes a function, not the name of a function. Try just changing it to `setInterval(change_slide, 3000)` — Carcigenicate, Aug 12 '16 at 19:18
Yeah move it out of the ready. It can definitely take both a string or a function pointer. — Danny Buonocore, Aug 12 '16 at 19:19
Changing it to `setInterval(change_slide, 3000)` will work. But the problem is when you pass setInterval a string, it calls `eval` on the string in the global scope, and `change_slide` is only defined within `document.ready`. — CoconutFred, Aug 12 '16 at 19:20
@Carcigenicate, either is acceptable syntactically. https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval — Jonathan M, Aug 12 '16 at 19:20

score 5 · Accepted Answer · answered Aug 12 '16 at 19:24

5

When you use a character string argument to setInterval, the Javascript code is executed in the global environment. You should pass a function reference instead of a character string, then it will be evaluated in the local environment.

setInterval(change_slide, 3000);

Note that you should not put parentheses after change_slide here. That will call the function immediately, instead of passing a reference to the function.

answered Aug 12 '16 at 19:24

Barmar

741,623
53
500
612

This should be the accepted answer for the first sentence. – 001 Aug 12 '16 at 19:34

M.Tanzil · Answer 2 · 2016-08-12T19:28:51.233

0

Take the function declaration out of document ready function,

Also change

setInterval('change_slide()', 3000);

To

setInterval(change_slide, 3000);

Here is modified code

$(document).ready(function() {
  var random = Math.floor((Math.random() * 5) + 1);
  var pclass = 'bgpick' + random;
  var number;
  $('.picks').addClass(pclass);
  setInterval(change_slide, 3000);
  $('.next').on('click', function() {
    change_slide();
  });
});
function change_slide() {
  number = pclass.charAt(6);
  number = parseInt(number);

  if (number == 5) number = 1;
  else number++;

  $('.picks').removeClass(pclass);
  pclass = 'bgpick' + number;
  $('.picks').addClass(pclass);
}

edited Aug 12 '16 at 19:28

answered Aug 12 '16 at 19:22

M.Tanzil

1,987
1
12
28

The first sentence is the correct answer. The rest of this answer is not needed. – Jonathan M Aug 12 '16 at 19:22
No, taking the function out of the `ready` will create a global. Don't fall into this trap. The solution is to not use a string, so that it isn't tied to global scope. – 4castle Aug 12 '16 at 19:24
revert _what_ stupidity - the second piece of code is broken. Supporting that is not wise – VLAZ Aug 12 '16 at 19:24
@Vld: I got at bit blind. i didnt see it was the invocation. apologies – naveen Aug 12 '16 at 19:28
@JonathanM The first sentence fixes it, but it is bad practice. – 4castle Aug 12 '16 at 19:36
@4castle, can you explain that a bit? I might agree with you. – Jonathan M Aug 12 '16 at 19:38
@JonathanM It creates a global function. [This question](http://stackoverflow.com/q/1841916/5743988) shows how to avoid that practice. Using `.ready()` is another way to avoid making a global. – 4castle Aug 12 '16 at 19:40

I can't use my function in Javascript

2 Answers2