/    Sign up×
Community /Pin to ProfileBookmark

Help with Java Script code please

Copy linkTweet thisAlerts:
Dec 13.2012

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 –

[LIST]

  • [*]

    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.


    • [/LIST]

    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>

    to post a comment
    JavaScript

    4 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @holyhttpDec 13.2012 — 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.
    Copy linkTweet thisAlerts:
    @dulphinluvauthorDec 13.2012 — 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>
    Copy linkTweet thisAlerts:
    @dulphinluvauthorDec 13.2012 — 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,
    Copy linkTweet thisAlerts:
    @dulphinluvauthorDec 14.2012 — 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>



    [/QUOTE]
    ×

    Success!

    Help @dulphinluv spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.19,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...