Jquery script not running inside function

Question

This script is running if i dont put it into a function but doesnt work inside function..

Please explain the logic to me

    $(document).ready(function(){
       var active=$('.active');
       var index=$('#pics li').index(active);
       var maxindex=$('#pics li').length-1;

       function makeCircles(){
           for (var i=0;i<=maxindex;i++)
           {
               var $circle=$("<li>",{class:'circle'});
               $('#navCircles').append($circle);
           }
        }   
      });

The code in makeCircles function is not running. however it works fine if i remove the function and place those lines directly below variables... as follows.

$(document).ready(function(){
var active=$('.active');
var index=$('#pics li').index(active);
var maxindex=$('#pics li').length-1;

    for (var i=0;i<=maxindex;i++)
    {
        var $circle=$("<li>",{class:'circle'});
        $('#navCircles').append($circle);
    }   
});

Thanks in advance.

can you show us how the "non functioning code" looks like? jsFiddle perhaps? — achudars
– achudars, Commented Jul 19, 2013 at 10:30
you need to execute a function to execute the code inside so add: makeCircles() — Joel Harkes
– Joel Harkes, Commented Jul 19, 2013 at 10:31

mohkhan · Accepted Answer · 2013-07-19 10:32:12Z

2

You forgot to invoke the function...

$(document).ready(function(){
   var active=$('.active');
   var index=$('#pics li').index(active);
   var maxindex=$('#pics li').length-1;

   (function makeCircles(){
       for (var i=0;i<=maxindex;i++)
       {
           var $circle=$("<li>",{class:'circle'});
           $('#navCircles').append($circle);
       }
    })();   
  });

answered Jul 19, 2013 at 10:32

mohkhan

12.3k2 gold badges27 silver badges27 bronze badges

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

2 Comments

HIRA THAKUR Over a year ago

why is invoking necessary? and is this () the you invoke function...just asking.

mohkhan Over a year ago

Because what you have done is just declared it. The code will only be executed when you call that function.

Joel Harkes · Accepted Answer · 2013-07-19 10:32:28Z

0

you only defined the function, you also need to execute it:

$(document).ready(function(){
   var active=$('.active');
   var index=$('#pics li').index(active);
   var maxindex=$('#pics li').length-1;

   function makeCircles(){ //define the function
       for (var i=0;i<=maxindex;i++)
       {
           var $circle=$("<li>",{class:'circle'});
           $('#navCircles').append($circle);
       }
    }   
    makeCircles(); //execute the function
  });

answered Jul 19, 2013 at 10:32

Joel Harkes

11.7k3 gold badges49 silver badges71 bronze badges

1 Comment

Aman Gupta Over a year ago

ohh!! thanks a lot! i just got confused and forgot to do that.

som · Accepted Answer · 2013-07-19 10:33:56Z

0

$(document).ready(function(){
   var active=$('.active');
   var index=$('#pics li').index(active);
   var maxindex=$('#pics li').length-1;

   function makeCircles(){ 
       for (var i=0;i<=maxindex;i++)
       {
           var $circle=$("<li>",{class:'circle'});
           $('#navCircles').append($circle);
       }
    }   
    makeCircles(); // call this function
});

Please try this.

answered Jul 19, 2013 at 10:33

som

4,6542 gold badges23 silver badges36 bronze badges

Collectives™ on Stack Overflow

Jquery script not running inside function

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related