www.webdeveloper.com
+ Reply to Thread
Results 1 to 5 of 5
  1. 12-12-2012 06:24 PM #1
    dulphinluv
    dulphinluv is offline Registered User
    Join Date
    Dec 2012
    Posts
    4

    Help with Java Script code please

    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>
    Reply With Quote Reply With Quote
  2. 12-12-2012 10:23 PM #2
    holyhttp's Avatar
    holyhttp
    holyhttp is offline Registered User
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    494
    Your code certainly needs some organizing.
    The more important thing to point out if your web pages does not have any image tag to show the animation.



    <!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">
    <!--
    //Only define global variables here
    var curPuppy= curPin=-1;
    var puppies= new Array();
    var pins= new Array();

    /*----------------------------- */
    //Preload images into puppies array
    function preloadPuppies(){
    for(var i=0; i<7; i++){
    puppies[i]=new Image();

    if(i==0){ puppies[i].src="pictures/puppy.gif"; }
    else { puppies[i].src='pictures/puppy'+j+'.gif'; }
    }

    /*----------------------------- */
    //Preload images into pins array
    function preloadPins(){
    for(var i=0; i<7; i++){
    pins[i]=new Image();
    pins[i].src='pictures/pin'+j+'.gif'; }
    }

    /*----------------------------- */
    //Pin animation
    function runPin() {
    var n=pins.length; //number of images in pins array
    curPin++; //increment cursor by 1
    if(curPin>=n){curPin=0; } //make sure curPin is less than 5

    document.getElementById('animation')= pins[curPin].src;
    }

    /*----------------------------- */
    // Puppy animation function
    function runPuppy() {
    var n=puppies.length; //total number of images in puppies array
    curPuppy++;

    if(curPuppy>=n){curPuppy=0; }

    document.getElementById('animation').src = puppies[curPuppy].src;
    }

    /*----------------------------- */
    //Set the type of animation to take place
    function changeAnimation(){
    var item= document.forms[0].myText.value;
    clearInterval(begin);

    i f (item == "run") {
    begin = setInterval( "runPuppy", 90 );
    }
    else if ( item == "bounce" ) {
    begin = setInterval( "runPin", 90 );
    }
    }

    /*----------------------------- */
    //Initialization
    (function (){
    //preloads Puppy images
    preloadPuppies();

    //preloads Pin images
    preloadPins();
    })();

    //-->
    </script>
    </head>

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


    Please double-check the code to make sure there is no typo preventing it to work.
    Last edited by holyhttp; 12-12-2012 at 10:30 PM.
    Web Developer SF Bay Area, CA - Hands-on Training Online - Custom Blog Design
    Reply With Quote Reply With Quote
  3. 12-12-2012 11:00 PM #3
    dulphinluv
    dulphinluv is offline Registered User
    Join Date
    Dec 2012
    Posts
    4
    I did some revising on my code tonight since i posted...how does this look?


    <!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="text/javascript">
    <!--
    var begin;

    var puppy;
    var puppy = new Array(6);
    var curPuppy = 0;
    puppy[0] = new Image();
    puppy[0].src = "pictures/puppy0.gif";
    puppy[1] = new Image();
    puppy[1].src = "pictures/puppy1.gif";
    puppy[2] = new Image();
    puppy[2].src = "pictures/puppy2.gif";
    puppy[3] = new Image();
    puppy[3].src = "pictures/puppy3.gif";
    puppy[4] = new Image();
    puppy[4].src = "pictures/puppy4.gif";
    puppy[5] = new Image();
    puppy[5].src = "pictures/puppy5.gif";
    for(var i = 0; i < 5; ++i)
    puppy[i] = new Image();
    puppy[0].src = "pictures/puppy0.gif";

    var pin;
    var pin = new Array(6);
    var curPin = 0;
    pin[0] = new Image();
    pin[0].src = "pictures/pin0.gif";
    pin[1] = new Image();
    pin[1].src = "pictures/pin1.gif";
    pin[2] = new Image();
    pin[2].src = "pictures/pin2.gif";
    pin[3] = new Image();
    pin[3].src = "pictures/pin3.gif";
    pin[4] = new Image();
    pin[4].src = "pictures/pin4.gif";
    pin[5] = new Image();
    pin[5].src = "pictures/pin5.gif";
    for(var i = 0; i < 6; ++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()
    {
    document.images[0].src = puppy[curPuppy].src;
    ++curPuppy;
    if ( curPuppy >= puppy.length ) curPuppy = 0;
    }
    //-->
    </script>
    </head>

    <body>
    <h1>Change Animation</h1>
    <h4>(Type run for Puppy and bounce for Push Pin)</h4>
    <form action="">
    <p>Type:<input name="myText" type="text" value="" size="10" maxlength="6" />
    <input name="myText" type="button" onClick="changeAnimation()" value="Change" />
    <p><img src="pictures/puppy0.gif"></p>
    </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>
    Reply With Quote Reply With Quote
  4. 12-12-2012 11:15 PM #4
    dulphinluv
    dulphinluv is offline Registered User
    Join Date
    Dec 2012
    Posts
    4
    I think my only problem right now is that i need a spot for the animation to take place and i dont know how to do that?

    document.getElementById('animation').src = puppies[curPuppy].src;
    } <<<<<<like that

    and

    <img src="" id="animation"> <<<<<that

    how would i do something like this with my code, assuming i have it correct,
    Reply With Quote Reply With Quote
  5. 12-13-2012 09:26 PM #5
    dulphinluv
    dulphinluv is offline Registered User
    Join Date
    Dec 2012
    Posts
    4
    UPDATE:
    I finally got it working!!!!! Here is the ending code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Running Puppy</title>
    <script type="text/javascript">

    var begin;

    var puppy;
    var puppy = new Array(6);
    var curPuppy = 0;
    puppy[0] = new Image();
    puppy[0].src = "pictures/puppy0.gif";
    puppy[1] = new Image();
    puppy[1].src = "pictures/puppy1.gif";
    puppy[2] = new Image();
    puppy[2].src = "pictures/puppy2.gif";
    puppy[3] = new Image();
    puppy[3].src = "pictures/puppy3.gif";
    puppy[4] = new Image();
    puppy[4].src = "pictures/puppy4.gif";
    puppy[5] = new Image();
    puppy[5].src = "pictures/puppy5.gif";
    for(var i = 0; i < 5; ++i)
    puppy[i] = new Image();
    puppy[0].src = "pictures/puppy0.gif";

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

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

    }

    // Puppy animation
    function runPuppy()
    {
    if (curPuppy == 5)
    curPuppy = 0;
    else
    ++curPuppy;
    document.images[0].src = puppy[curPuppy].src;
    }

    function changeAnimation(){
    var item= document.forms[0].myText.value;
    clearInterval(begin);

    if ( item == "run" ){
    begin = setInterval( "runPuppy()", 75 );
    }
    else if ( item == "bounce" ){
    begin = setInterval( "runPin()", 90 );
    }
    }

    </script>
    </head>

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

    <p><img src="pictures/puppy0.gif"></p>

    </form>

    </body>
    </html>
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

Bookmarks

Posting Permissions

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

Forum Rules

 HTML5 Development Center



Recent Articles