Hi I am trying to call the images from the array to move using JQuery functions.
I have added a tag to identify every div with the id Predator. I am calling them and move them when the “Play” button is click.
Unfortunately it dint. Can anyone help to spot the error?
<HTML>
<HEAD>
<script src="code.jquery.com/jquery-1.7.2.js"></script>
<SCRIPT language="javascript">
//************** Array ***********************
var Predatorlist = [];
//uniqueid = "anchovies" + document.getElementById('amount').value;
function addvalue()
{
Predatorlist.push(uniqueid)
alert(Predatorlist);
}
function removevalue()
{
Predatorlist.pop(uniqueid)
alert(x.innerHTML=Predatorlist);
}
//************** Array ***********************
var div = $("div");
function runIt() {
div.show("slow");
div.animate({left:'+=200'},2000);
div.slideToggle(1000);
div.slideToggle("fast");
div.animate({left:'-=200'},1500);
div.hide("slow");
div.show(1200);
div.slideUp("normal", runIt);
}
function Add() {
var id = Math.floor(Math.random()*101+1);
x = Math.random() * 550;
y = Math.random() * 250;
if (document.getElementById('amount').value < 50){
document.getElementById('amount').value++;
svg = document.getElementById("main");
// construct uniqueid for the images
uniqueid = "<div id='Predator'>" + "frog" + document.getElementById('amount').value + "</div>";
//namespaces for SVG
svgNS="http://www.w3.org/2000/svg";
xlinkNS="http://www.w3.org/1999/xlink";
// create a image element
image = document.createElementNS(svgNS, 'image');
// set id and other attributes
image.setAttributeNS(null, "id", uniqueid);
image.setAttributeNS(xlinkNS, "href","jef-frog.gif");
image.setAttributeNS(null, "x", x);
image.setAttributeNS(null, "y", y);
image.setAttributeNS(null, "width", "50");
image.setAttributeNS(null, "height", "50");
// append to svg
svg.appendChild(image);
} else {
alert("we got 50");
}
}
function Remove() {
if(document.getElementById('amount').value > 0)
{
document.getElementById('amount').value--;
svg = document.getElementById("main");
svg.removeChild(svg.lastChild);
}
}
function numinput(e){
// get the input value if enter
key=e.keyCode || e.which;
if (key==13){
total = document.getElementById("amount").value;
dummy = total;
// clear svg with image to avoid clearing the canvas
svg = document.getElementById("main");
element = svg.getElementsByTagName("image");
while(element.length>0){
element = svg.getElementsByTagName("image");
element[0].parentNode.removeChild(element[0]);
}
// use the input to create the number of frog.
while (dummy>0)
{
Add();
dummy--;
}
document.getElementById("amount").value = total;
}
}
/*function numeralsOnly(evt) {
evt = (evt) ? evt : event;
var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode :
((evt.which) ? evt.which : 0));
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
*/
</SCRIPT>
</HEAD>
<BODY>
<div>
<SVG xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" id="main" style="border:inset 1px #000000;width:600;height:300"><param name='wmode' value='transparent'/></SVG>
</div>
<H2>TESTING</H2>
PREY<BR/>
<img src="jef-frog.gif" alt="frogsonice.com" width="100" height="100"/><BR/>
<INPUT type="button" value="+" onClick="Add(); addvalue();">
<!-- disabled the textfield -->
<input type="text" id="amount" value=0 maxlength="3" size="1" onkeypress="numinput(evt)">
<INPUT type="button" value="-" onClick="Remove(); removevalue();">
<INPUT type="button" value="Play" onClick="runIt();">
</BODY>
</HTML>
You mentioned “every div with the ID Predator”. By definition, there can only be one element with the ID predator. You should look into using classes.
The easiest way to select all of the elements with the class is to use JQuery and simply use the below snippet. From there you can act on the elements with the class “Predator”.