jqery function wont work

Hi, Why cant the following jquery work when I place the code in a separate function as below

I get no error but no animation.

$(document).ready(function(){
 
  var $val1=6;
  var $val2=10.3;
  var img = ["images/bcave1.png", "images/bcave2.png"];
  var indexNum=0;
  
	setInterval("animatepic1()",100);
 /*  var gameLoop = setInterval( function(){
	  $("#pic").attr("src", img[indexNum]);
      indexNum++;	
      if (indexNum >= 2) {indexNum = 0;} 
	   
	   } , 100);
	   */
  
 
   
 }); 
 
   function animatepic1(){
			 $("#pic").attr("src", img[indexNum]);
     		 indexNum++;	
      		 if (indexNum >= 2) {indexNum = 0;} 
	   
	    }

.....
<img id ="pic" src="images/bcave1.png" alt="eight ball" />

Open in new window

jagguyAsked:
Who is Participating?
 
Ersoy HasanConnect With a Mentor Commented:
I suppose it's because indexNum and img array are defined in $(document).ready function's scope.
just change:
var indexNum=0;
//to 
window.indexNum=0;//this way you will define them in global object and they will be accessible everywhere

Open in new window

or even better move your function into ready scope and use the correct way to address a function with setInterval
$(document).ready(function(){
 
  var $val1=6;
  var $val2=10.3;
  var img = ["images/bcave1.png", "images/bcave2.png"];
  var indexNum=0;
  

  
    function animatepic1(){
			 $("#pic").attr("src", img[indexNum]);
     		 indexNum++;	
      		 if (indexNum >= 2) {indexNum = 0;} 
	   
	    }
	setInterval(animatepic1 ,100);   
 }); 
 
.....
<img id ="pic" src="images/bcave1.png" alt="eight ball" />

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.