javascript - Jquery script not running inside function -

this script running if dont put function doesnt work inside function..

please explain logic me

    $(document).ready(function(){        var active=$('.active');        var index=$('#pics li').index(active);        var maxindex=$('#pics li').length-1;         function makecircles(){            (var i=0;i<=maxindex;i++)            {                var $circle=$("<li>",{class:'circle'});                $('#navcircles').append($circle);            }         }          }); 

the code in makecircles function not running. works fine if remove function , place lines directly below variables... follows.

$(document).ready(function(){ var active=$('.active'); var index=$('#pics li').index(active); var maxindex=$('#pics li').length-1;      (var i=0;i<=maxindex;i++)     {         var $circle=$("<li>",{class:'circle'});         $('#navcircles').append($circle);     }    }); 

thanks in advance.

you defined function, need execute it:

$(document).ready(function(){    var active=$('.active');    var index=$('#pics li').index(active);    var maxindex=$('#pics li').length-1;     function makecircles(){ //define function        (var i=0;i<=maxindex;i++)        {            var $circle=$("<li>",{class:'circle'});            $('#navcircles').append($circle);        }     }        makecircles(); //execute function   });