Help with Java Script code please!

dulphinluv · 12-12-2012, 11:09 PM

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:

Code:

<!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;    
     for(var i = 0; i < 6; ++i)
            puppy[i] = new Image();
puppy[0].src = "pictures/puppy0.gif";
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";

function runPuppy() {
  if (curPuppy == 6)
           curPuppy = 0;
     else
           ++curPuppy;
     document.images[0].src = puppy[curPuppy].src;

var pin;   
     for(var i = 0; i < 5; ++i)
            pin[i] = new Image();
pin[0].src = "pictures/pin0.gif";
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";

function runPin() {
	
     if (curPin == 5)
           curPin = 0;
     else
           ++curPin;
     document.images[0].src = pin[curPin].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>

Old Pedant · 12-12-2012, 11:15 PM

Just for starters, where is the } for the end of the runPuppy function?

Where is the { for the start of the runPin function?

User a debugger (I recommend Chrome) and the debugger's error console to *FIRST* fix all your code errors. Then, if you can't figure it out, come back and ask again.

To bring up the debugger, just hit the F12 key.

Then click the "Console" tab to see your errors (or at least some of them...fix one or two and likely more will pop up).

dulphinluv · 12-13-2012, 12:03 AM

I guess i should include that i am a newbie to javascript, i am taking a class online and having to teach it to myself, the teacher has not taught us anything at all, i am lost and just trying to get through this.

Anyway i put the bracket in and the bracket for the start of pin was there. i just downloaded chrome, it is telling me that begin is not defined, than is says runPuppy is not defined

Code:

<!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 = "pictures/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>

dulphinluv · 12-13-2012, 12:42 AM

Is there anybody that can help? further? I am new to javascript and i dont know hardly anything about it, this class hasnt taught us anything, it is an online course and the teacher gave us a final project and there is nothing in our book in regards to what he gave us to do. A bunch of us are lost

dulphinluv · 12-13-2012, 12:43 AM

i put in the bracket and the debugger says that begin is undefined..i don't get it, what am i missing

Old Pedant · 12-13-2012, 12:57 AM

You are missing var begin;

Needs to be outside of any function.

********

One more hint: You keep doing

Code:

document.images[0].src

But no place in that code you showed do you *HAVE* any <img> tag, which is what document.image is looking for.

In any case, you would be better off doing something like:

Code:

<img id="mainpic" alt="animation runs here" />

And then using

Code:

document.getElementById("mainpic").src = ...whatever...

Old Pedant · 12-13-2012, 01:00 AM

Okay...one more. But now it really is time you started doing a bit more yourself.

You do this:

Code:

puppy[6] = "pictures/puppy5.gif";

for example.

But then you try to do

Code:

 xxx   = puppy[curPuppy].src;

Ummm... How do you expect to find the .src property of puppy[x] when all there is in puppy[x] is a *STRING*???

dulphinluv · 12-13-2012, 02:07 AM

Thank you, but to be honest most of that code is how my teacher told me to put.

what if i put: the (.src) in there?
var puppy;
var puppy = new Array(7);
var curPuppy = 0;
Puppy[0].src = "pictures/puppy.gif";
Puppy[1].src = "pictures/puppy0.gif";
puppy[2].src = "pictures/puppy1.gif";
puppy[3].src = "pictures/puppy2.gif";
puppy[4].src = "pictures/puppy3.gif";
puppy[5].src = "pictures/puppy4.gif";
puppy[6].src = "pictures/puppy5.gif";

dulphinluv · 12-13-2012, 02:10 AM

And sorry i somehow copied the non updated code, here is the right code..but still cant get it working:

Code:

<script type="JavaScript">
<!--

var puppy;
var puppy = new Array(7);
var curPuppy = 0;
Puppy[0].src = "pictures/puppy.gif";
Puppy[1].src = "pictures/puppy0.gif";
puppy[2].src = "pictures/puppy1.gif";
puppy[3].src = "pictures/puppy2.gif";
puppy[4].src = "pictures/puppy3.gif";
puppy[5].src = "pictures/puppy4.gif";
puppy[6].src = "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].src = "pictures/pin0.gif";
pin[1].src = "pictures/pin1.gif";
pin[2].src = "pictures/pin2.gif";
pin[3].src = "pictures/pin3.gif";
pin[4].src = "pictures/pin4.gif";
pin[5].src = "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="myText" 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>

Old Pedant · 12-13-2012, 02:12 AM

Nope.

Either your teacher is an idiot (I don't think that's impossible, at all! we see a lot of idiotic instructors' stuff here!) or you misunderstood what you need to do.

By the by, I should have pointed you to RULE 1.5 here:
http://www.codingforums.com/rules.htm

THAT is why I won't simply DO the homework for you.

Old Pedant · 12-13-2012, 02:13 AM

If you are going to do something like that, then you need to do:

Code:

Puppy[0] = new Image();
Puppy[0].src = "pictures/puppy.gif";
Puppy[1] = new Image();
Puppy[1].src = "pictures/puppy0.gif";
.... etc ...

Did your instructor show that [icode]new Image()[/code] and you forgot it, or did the instructor goof big time?

dulphinluv · 12-13-2012, 02:16 AM

here is the email he sent me

You have several problems in your program:

1) You need to add:

var begin; // one time
for(var i = 0; i < 6; ++i)
puppy[i] = new Image();
puppy[0].src = "puppy/puppy0.gif"; // begin with puppy0.gif and the array is puppy not runpuppy

2) You need to do the same for pin.

3) Your function runPin should be:

if (curPin == 5) // value 5 not 7

curPin = 0; // You must use curPin not curPuppy

else
++curPin;
document.images[0].src = pin[curPin].src; // missing .src

4) You need to write the runPuppy function the same as runPin in the above 3)

5) Your changeAnimation function should add the following at the beginning:

var item= document.forms[0].myText.value; // myText is the name of the text box, you need to add it in the input tag
clearInterval(begin);

6) Remove setTimeout functions as well as any animate() functions.

dulphinluv · 12-13-2012, 02:17 AM

and i understand about the homework thing, i am just soooooooo lost :-( and it sucks

Old Pedant · 12-13-2012, 02:17 AM

Oh, wth.

Let me show you how I would do that:

Code:

var puppy = [ "puppy","puppy0","puppy1","puppy2","puppy3","puppy4","puppy5"];
for ( var p = 0; p < puppy.length; ++p )
{
    var pic = new Image();
    pic.src = "pictures/" + puppy[p] + ".gif";
    puppy[p] = pic;
}

How come you have "puppy.gif" (with no digit) but you start with "pin0.gif" (WITH a digit)? Is one of those wrong?

Old Pedant · 12-13-2012, 02:18 AM

Quote:

Originally Posted by dulphinluv

here is the email he sent me

1) You need to add:

var begin; // one time
for(var i = 0; i < 6; ++i)
puppy[i] = new Image();
puppy[0].src = "puppy/puppy0.gif"; // begin with puppy0.gif and the array is puppy not runpuppy

Isn't that what I said?