I am new to javascript, i have been taking an online course, so basically i have been having to teach myself. All the studnets in the course are lost and we havent learned anything. We have just been getting by.

I am trying to complete my final project for class and i am stuck. I cant get it to do anything. Please help.

I am supposed to -
  • Create a web page with a text box
  • Add JavaScript code to change animation of puppy running and push pin bouncing.
  • than add code so that if the user enters run and clicks the Change button, the puppy animation will show. If the user enters bounce and clicks the Change button, the push pin animation should show.


Here is what i have so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Running Puppy</title>
<script type="JavaScript">
<!--

var puppy;
var puppy = new Array(7);
var curPuppy = 0;
Puppy[0] = "pictures/puppy.gif";
Puppy[1] = "pictures/puppy0.gif";
puppy[2] = "pictures/puppy1.gif";
puppy[3] = "pictures/puppy2.gif";
puppy[4] = "pictures/puppy3.gif";
puppy[5] = "pictures/puppy4.gif";
puppy[6] = "pictures/puppy5.gif";

var begin; // one time
for(var i = 0; i < 6; ++i)
puppy[i] = new Image();
puppy[0].src = "puppy/puppy0.gif";

var pin;
var pin = new Array(6);
var curPin = 0;
pin[0] = "pictures/pin0.gif";
pin[1] = "pictures/pin1.gif";
pin[2] = "pictures/pin2.gif";
pin[3] = "pictures/pin3.gif";
pin[4] = "pictures/pin4.gif";
pin[5] = "pictures/pin5.gif";

var begin;
for(var i = 0; i < 5; ++i)
pin[i] = new Image();
pin[0].src = "pictures/pin0.gif";

function runPin()
{
if (curPin == 5)
curPin = 0;
else
++curPin;
document.images[0].src = pin[curPin].src;
}

function runPuppy()
{
if (curPuppy == 6)
curPuppy = 0;
else
++curPuppy;
document.images[0].src = puppy[curPuppy].src;
}
//-->
</script>
</head>

<body>
<h1>Change Animation</h1>
<h4>(Type run for Puppy and bounce for Push Pin)</h4>
</script
><form action="get">
<p>Type:<input name="myText" type="text" value="" size="10" maxlength="6" />
<input name="" type="button" onClick="changeAnimation()" value="Change" />
</form>

<script type="text/javascript">
function changeAnimation(){
var item= document.forms[0].myText.value;
clearInterval(begin);
if ( item == "run" )
begin = setInterval( "runPuppy()", 90 );
else if ( item == "bounce" )
begin = setInterval( "runPin()", 90 );
}
//-->
</script>
</body>
</html>