Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 31
  1. #1
    New Coder
    Join Date
    Dec 2012
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with Java Script code please!

    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>
    Last edited by VIPStephan; 12-13-2012 at 02:11 PM. Reason: added code BB tags

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,111
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    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).
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Dec 2012
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>
    Last edited by VIPStephan; 12-13-2012 at 02:09 PM. Reason: added code BB tags

  • #4
    New Coder
    Join Date
    Dec 2012
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    New Coder
    Join Date
    Dec 2012
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i put in the bracket and the debugger says that begin is undefined..i don't get it, what am i missing

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,111
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    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...
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,111
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    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*???
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New Coder
    Join Date
    Dec 2012
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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";

  • #9
    New Coder
    Join Date
    Dec 2012
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>
    Last edited by VIPStephan; 12-13-2012 at 02:10 PM. Reason: added code BB tags

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,111
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,111
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    New Coder
    Join Date
    Dec 2012
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #13
    New Coder
    Join Date
    Dec 2012
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    and i understand about the homework thing, i am just soooooooo lost :-( and it sucks

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,111
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,111
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    Quote Originally Posted by dulphinluv View Post
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •