Question

I have an array call “Predatorlist” storing

 <div id="Predator1"><img src='jef-frog.gif' width='50'></div>

And I declared a var to store the “Predator” and attached the ID.

var speciesType = 'Predator' + document.getElementById('amount').value; 

And I have an Input button ::

 <INPUT type="button" value="Play" onClick="javascript:runItem('Predator') ;"> 

May I know what item I should pass in for the following function to capture and produce as what is required in the input button. “Javascript:runItem(‘Predator’);?

function runItem(Predatorlist) {
     var item1 = $("#"+speciesType),cycle1;
     /* Set a the starting position to be random by editing the css */
     $(item1).css("left", startItem1X+"px");
     $(item1).css("top", startItem1Y+"px");

     //$("<img src='jef-frog.gif' width='50'>").appendTo("div#Predator");

     /* Cycle1 and Cycle2 variables allow infinite loop */ 
     (cycle1 = function() {
      var m = randomRange(50,100);
      var n = randomRange(75,150);
      item1.animate({left:'+='+n},2000);
      item1.animate({left:'+='+m, top:'+='+m}, 2000)
      item1.animate({left:'-='+m, top:'+='+m}, 2000)
      item1.animate({left:'-='+n},2000);
      item1.animate({top:'-='+n},2000,cycle1)
          })();

         alert(speciesType);
     }

Answer 1

var item1 = $("#"+speciesType)
$(item1). //something...

This doesnt look right, you should only give a string into a jQuery object, it makes the code far more readable than passing the enire object in there. So, the above lines should become either

var item1 = "#"+speciesType
$(item1). //something...

or

var item1 = $("#"+speciesType)
item1. //something...

---

Next, I would use a setInterval for the animation loop, because you cannot stop it like you have it now, and it makes the code much cleaner.

---

Finally, for your predators: Do you need something like the following, that appends code to the body of the document?

for(var i in predatorList) {
  $('body').append('<div id="'+predatorList[i]+'"><img src="img/pred.png"></div>');
}

For more questions, please comment, I found the question hard to understand, so my answer might not be what you mean.

---

EDIT 2:

See the code (working): http://jsfiddle.net/sREEw/3/

What am I doing?

On an addition of a predator:

• Add the div to the body
• Give the div an id of the current number of predators
• set an animation loop, but first cancelling the first if it was already running. In the loop we update every predator there is
• Increase the num, so the next predator will have a new ID

On a removal of a predator:

• Decrease the num by 1 for easier calculations
• Remove the predator from the body
• stop the interval if needed

As you can see, all I am saving in variables is the current number of predators, and the interval ID, so I can stop the loop if needed.