Javascript program to display 1 of 2 animations based on user input

Page 1 of 1

14 Replies - 929 Views - Last Post: 11 December 2012 - 09:25 PM

#1 NewToJavaScriptandLost

New D.I.C Head

Reputation: 0

Posts: 7
Joined: 10-December 12

Javascript program to display 1 of 2 animations based on user input

Posted 10 December 2012 - 06:13 PM

I am trying to write a program using javascript that asks a user if they want to see an animation of a dog running or a push pin bouncing. I have created the functions that create the animation, but I can't figure out how to verify which option the user wants to see and then actually display it on the page. I have tried this many different ways and can't get it to work.

Here is my 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>
<title>Animation Switch</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<script type="text/javascript">
/* <![CDATA[ */

	var runDog;
	var dog = new Array(6);
	var curDog = 0;
		for (var imagesLoaded=0; imagesLoaded < 5; ++imagesLoaded) {
   			dog[imagesLoaded] = new Image();
    		dog[imagesLoaded].src = "puppy"
       		+ imagesLoaded + ".gif";
    	if (imagesLoaded == 5)
       		runDog = setInterval("runDog()", 100);
		}
		
	var pushPin;
	var pin = new Array(6);
	var curPin = 0;
		for (var imagesLoaded=0; imagesLoaded < 5; ++imagesLoaded) {
     		pin[imagesLoaded] = new Image();
     		pin[imagesLoaded].src = "pin"
        	+ imagesLoaded + ".gif";
   		if (imagesLoaded == 5)
        	pushPin = setInterval("pushPin()", 100);
		}
		
	var choice = document.animation.choice.value;

function check(choice){

	if (choice == run)
		runDog();
	else
		pushPin();
}
	
	
function runDog(){
		if (curDog == 5)
           curDog = 0;
     	else
           ++curDog;
     	document.images[0].src = dog[curDog].src;
	 	document.getElementById("play").src = dog[curDog].src;
	 	window.alert ("dog runs now");
}
function pushPin(){
		if (curPin == 6)
           curPin = 0;
     	else
           ++curPin;
     	document.images[0].src = pin[curPin].src;
	 	document.getElementById("play").src = pin[curPin].src;	
}
check()

/* ]]> */
</script>
</head>

<body>
<h1>Change Animation</h1>
<h3>(type run for Puppy and bounce for Push Pin)
<br/>

<form name="animation">
	<p>Type: <input name="choice" type="text" size="30" /></p>
	<input name="Submit" type="button" value="Change" onclick="check(choice)"/>
</form>

<div id="play" height="72" width="145"></div>

</body>
</html>

Am I even close to getting this to work?

Is This A Good Question/Topic? 0

Replies To: Javascript program to display 1 of 2 animations based on user input

#2 raghav.naganathan

Perfectly Squared ;)

Reputation: 407

Posts: 1,440
Joined: 14-September 12

Re: Javascript program to display 1 of 2 animations based on user input

Posted 11 December 2012 - 02:09 AM

Well, you would probably be getting 'invalid location of tag(form)' as an error.

That can be resolved by closing the <h3> tag.

One more thing you need to note is <div> tag doesn't have attributes such as height and width. It has attributes called 'style' and 'align'

regards,
Raghav

Was This Post Helpful? 0

#3 NewToJavaScriptandLost

New D.I.C Head

Reputation: 0

Posts: 7
Joined: 10-December 12

Re: Javascript program to display 1 of 2 animations based on user input

Posted 11 December 2012 - 07:14 AM

raghav.naganathan, on 11 December 2012 - 02:09 AM, said:

Thanks for pointing out the missing </h3> closing tag. What I really need to know is are the functions structured properly? I want one of the two animations (dog running or push pin bouncing) to be displayed depending on whether the user inputs the word 'run' or 'bounce' and clicks the change button. What I have now doesn't work. Are my functions not being called correctly or am I not referencing the if statement in the right way? I appreciate any help you can give me.

Was This Post Helpful? 0

#4 NewToJavaScriptandLost

New D.I.C Head

Reputation: 0

Posts: 7
Joined: 10-December 12

Re: Javascript program to display 1 of 2 animations based on user input

Posted 11 December 2012 - 10:02 AM

<!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>
<title>Animation Switch</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<script type="text/javascript">
/* <![CDATA[ */

	var runDog;
	var dog = new Array(6);
	var curDog = 0;
		for (var imagesLoaded=0; imagesLoaded < 5; ++imagesLoaded) {
   			dog[imagesLoaded] = new Image();
    		dog[imagesLoaded].src = "puppy"
       		+ imagesLoaded + ".gif";
    	if (imagesLoaded == 5)
       		runDog = setInterval("runDog()", 100);
		}
		
	var pushPin;
	var pin = new Array(6);
	var curPin = 0;
		for (var imagesLoaded=0; imagesLoaded < 5; ++imagesLoaded) {
     		pin[imagesLoaded] = new Image();
     		pin[imagesLoaded].src = "pin"
        	+ imagesLoaded + ".gif";
   		if (imagesLoaded == 5)
        	pushPin = setInterval("pushPin()", 100);
		}
		
function runDog(){
		if (curDog == 5)
           curDog = 0;
     	else
           ++curDog;
     	document.images[0].src = dog[curDog].src;
	 	document.getElementById("play1").src = dog[curDog].src;
//	 	window.alert ("dog runs now");
}
function pushPin(){
		if (curPin == 6)
           curPin = 0;
     	else
           ++curPin;
     	document.images[0].src = pin[curPin].src;
	 	document.getElementById("play2").src = pin[curPin].src;	
}
		
	var choice = document.animation.choice.value;

function check(){

	if (choice == run)
		runDog();
	else
		pushPin();
}
	
//check()

/* ]]> */
</script>
</head>

<body>
<h1>Change Animation</h1>
<h3>(type run for Puppy and bounce for Push Pin)</h3>
<br/>

<form name="animation">
	<p>Type: <input name="choice" type="text" size="30" /></p>
	<input name="Submit" type="button" value="Change" onclick="check()"/>
</form>


<div id="play1" ></div>
<div id="play2" ></div>

</body>
</html>

Are my functions structured properly? I can't get this to work at all!

This post has been edited by Dormilich: 11 December 2012 - 10:03 AM
Reason for edit:: fixed code tags

Was This Post Helpful? 0

#5 Dormilich

痛覚残留

Reputation: 2896

Posts: 7,549
Joined: 08-June 10

Re: Javascript program to display 1 of 2 animations based on user input

Posted 11 December 2012 - 10:20 AM

one of the core problems is that you have duplicate names. e.g. you have a variable named runDog and a function of that same name. hence (through function hoisting) the variable refers to the function. thus I would expect errors in the Error Console (esp. lines #18, #29).

for choosing one or the other, you could use a <select>, radio buttons or even a button for each action.

note: setInterval() expects a function in the first place, not a string. like setInterval(runDog, 100);

there is also a brace mismatch (unclosed for loops), duplicate code (the code for Pin and Dog only differs in some string values). and line #54 should cause an Error (undefined variable).

line #50 should throw an "… is null or not an object error".

lines #8, #62 can be omitted since you certainly don’t have an XHTML document here (unless you actually used the .xhtml file extension).

PS. why not using an animated GIF?

Was This Post Helpful? 0

#6 NewToJavaScriptandLost

New D.I.C Head

Reputation: 0

Posts: 7
Joined: 10-December 12

Re: Javascript program to display 1 of 2 animations based on user input

Posted 11 December 2012 - 11:07 AM

Thanks for the response and for your help. I am very new to Javascript and I knew that some of my code wasn't accurate. I have to use a text input box and a submit button, as well as create the animation myself because this is an assignment and that is what is required. I am trying now to make the adjustments you suggested. I have a feeling I may still need more help...it is all so complicated!

Was This Post Helpful? 0

#7 Dormilich

痛覚残留

Reputation: 2896

Posts: 7,549
Joined: 08-June 10

Re: Javascript program to display 1 of 2 animations based on user input

Posted 11 December 2012 - 11:15 AM

the first thing you should get used to is the Error Console. everything that is outright wrong will be listed there.

Was This Post Helpful? 0

#8 NewToJavaScriptandLost

New D.I.C Head

Reputation: 0

Posts: 7
Joined: 10-December 12

Re: Javascript program to display 1 of 2 animations based on user input

Posted 11 December 2012 - 11:46 AM

OK, so I checked the error console and it said that document.animation.choice.value was undefined. It also said the following line "choice == run" was undefined. I moved something in my code, but now the error console isn't showing any errors?? I tried to refresh with F5, but got nothing. I know my errors are in the check() function, but don't know how to fix it. Here is my code again:

<!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>
<title>Animation Switch</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<script type="text/javascript">
/* <![CDATA[ */

	var movingDog;
	var dog = new Array(6);
	var curDog = 0;
		for (var imagesLoaded=0; imagesLoaded < 5; ++imagesLoaded) {
   			dog[imagesLoaded] = new Image();
    		dog[imagesLoaded].src = "puppy"
       		+ imagesLoaded + ".gif";
    	if (imagesLoaded == 5)
       		movingDog = setInterval("runDog()", 100);
		}
		
	var bouncingPin;
	var pin = new Array(6);
	var curPin = 0;
		for (var imagesLoaded=0; imagesLoaded < 5; ++imagesLoaded) {
     		pin[imagesLoaded] = new Image();
     		pin[imagesLoaded].src = "pin"
        	+ imagesLoaded + ".gif";
   		if (imagesLoaded == 5)
        	bouncingPin = setInterval("pushPin()", 100);
		}
		
function runDog(){
		if (curDog == 5)
           curDog = 0;
     	else
           ++curDog;
     	document.images[0].src = dog[curDog].src;
	 	document.getElementById("play1").src = dog[curDog].src;
}
function pushPin(){
		if (curPin == 6)
           curPin = 0;
     	else
           ++curPin;
     	document.images[0].src = pin[curPin].src;
	 	document.getElementById("play2").src = pin[curPin].src;	
}

function check(){
	var choice = document.animation.choice.value;
	if (choice == 'run')
		runDog();
	else
		pushPin();
}


/* ]]> */
</script>
</head>

<body>
<h1>Change Animation</h1>
<h3>(type run for Puppy and bounce for Push Pin)</h3>
<br/>

<form name="animation">
	<p>Type: <input name="choice" type="text" size="30" /></p>
	<input name="Submit" type="button" value="Change" onclick="check()"/>
</form>
<!--<p><img src="puppy0.gif" id="dogAni" alt="Image of a dog." height="72" width="145" /></p>
<p><img src="pin0.gif" id="pinAni" alt="Image of a pushPin." height="72" width="145" /></p> -->

<div id="play1" ></div>
<div id="play2" ></div>

</body>
</html>

Was This Post Helpful? 0

#9 Dormilich

痛覚残留

Reputation: 2896

Posts: 7,549
Joined: 08-June 10

Re: Javascript program to display 1 of 2 animations based on user input

Posted 11 December 2012 - 12:04 PM

lines #38, #42: <div> have no src attribute.

honest advice: never omit braces. the characters you save in writing are not worth the readability loss.

// write conditions (if() and(!) else) always with braces
if (condition) {
    // do something
}
else {
    // do something else
}

// besides there are no problems if you need to insert additional lines
// compare
if (condition)
    doSomething();
    doSomethingElse();
// to
if (condition) {
    doSomething();
    doSomethingElse();
}
// even if they look alike, in the first code the
// doSomethingElse() function is executed regardless 
// of the condition

// the first one actually is
if (condition) {
    doSomething();
}
doSomethingElse();

the problem with the check() function is that it will only display one image (well, that’s what you tell it to do, after all). you do not start a loop.

there is also no reasonable point to use new Array(6). JS arrays are dynamic, setting the length on instantiation gains you nothing. just define an empty array via the array literal: var arr = [];

the line if (imagesLoaded == 5) is superfluous. after the loop is done, the variable will always hold that value.

and there is also no point in starting both animations on page load (the line afterwards). you want the animation to start when the user clicks a button.

Was This Post Helpful? 0

#10 Dormilich

痛覚残留

Reputation: 2896

Posts: 7,549
Joined: 08-June 10

Re: Javascript program to display 1 of 2 animations based on user input

Posted 11 December 2012 - 12:09 PM

tip for looping repeatedly through an array:

// example array
var arr = ["a", "b", "c"];
var index = 0;

function loop()
{
    console.log(arr[index]);
    index = ++index % arr.length;
}
// trying it out
loop();
loop();
loop();
loop();
loop();
loop();
loop();

Was This Post Helpful? 0

#11 NewToJavaScriptandLost

New D.I.C Head

Reputation: 0

Posts: 7
Joined: 10-December 12

Re: Javascript program to display 1 of 2 animations based on user input

Posted 11 December 2012 - 12:39 PM

I'm lost. I changed the array, but the main problem is nothing loads onclick. I will need to change the array for the push pin, but I don't understand where the loop() comes in and does it replace runDog() or?? I guess I'm just not cut out to learn this stuff...

<!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>
<title>Animation Switch</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<script type="text/javascript">
		
	var dogArr = ["puppy.gif", "puppy0.gif", "puppy1.gif", "puppy2.gif", "puppy3.gif", "puppy4.gif", "puppy5.gif"];
	var dogIndex = 0;
	 
	function loop(){
	    console.log(dogArr[dogIndex]);
	    dogIndex = ++dogIndex % dogArr.length;
	}
	// trying it out
	loop();
	loop();
	loop();
	loop();
	loop();
	loop();
	loop();
		
	var bouncingPin;
	var pin = new Array(6);
	var curPin = 0;
		for (var imagesLoaded=0; imagesLoaded < 5; ++imagesLoaded) {
     		pin[imagesLoaded] = new Image();
     		pin[imagesLoaded].src = "pin"
        	+ imagesLoaded + ".gif";
   		if (imagesLoaded == 5)
        	bouncingPin = setInterval("pushPin()", 100);
		}
		
function runDog(){
		if (dogIndex == 5)
           dogIndex = 0;
     	else
           ++dogIndex;
     	document.images[0].src = dogArr[dogIndex].src;
	 	document.getElementById("play1").src = dogArr[dogIndex].src;
}
function pushPin(){
		if (curPin == 6)
           curPin = 0;
     	else
           ++curPin;
     	document.images[0].src = pin[curPin].src;
	 	document.getElementById("play2").src = pin[curPin].src;	
}

function check(){
	var choice = document.animation.choice.value;
	if (choice == 'run'){
		loop();
	}
	else{
		pushPin();
	}
}

</script>
</head>

<body>
<h1>Change Animation</h1>
<h3>(type run for Puppy and bounce for Push Pin)</h3>
<br/>

<form name="animation">
	<p>Type: <input name="choice" type="text" size="30" /></p>
	<input name="Submit" type="button" value="Change" onclick="check()"/>
</form>

<div id="play1" img src="puppy0.gif" ></div>
<div id="play2" img src="pin0.gif"></div>

</body>
</html>

oops. forgot to close the code. sorry.

<!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>
<title>Animation Switch</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<script type="text/javascript">

	var dogArr = ["puppy.gif", "puppy0.gif", "puppy1.gif", "puppy2.gif", "puppy3.gif", "puppy4.gif", "puppy5.gif"];
	var dogIndex = 0;
	 
	function loop(){
	    console.log(dogArr[dogIndex]);
	    dogIndex = ++dogIndex % dogArr.length;
	}
	// trying it out
	loop();
	loop();
	loop();
	loop();
	loop();
	loop();
	loop();
		
	var bouncingPin;
	var pin = new Array(6);
	var curPin = 0;
		for (var imagesLoaded=0; imagesLoaded < 5; ++imagesLoaded) {
     		pin[imagesLoaded] = new Image();
     		pin[imagesLoaded].src = "pin"
        	+ imagesLoaded + ".gif";
   		if (imagesLoaded == 5)
        	bouncingPin = setInterval("pushPin()", 100);
		}
		
function runDog(){
		if (dogIndex == 5)
           dogIndex = 0;
     	else
           ++dogIndex;
     	document.images[0].src = dogArr[dogIndex].src;
	 	document.getElementById("play1").src = dogArr[dogIndex].src;
}
function pushPin(){
		if (curPin == 6)
           curPin = 0;
     	else
           ++curPin;
     	document.images[0].src = pin[curPin].src;
	 	document.getElementById("play2").src = pin[curPin].src;	
}

function check(){
	var choice = document.animation.choice.value;
	if (choice == 'run'){
		loop();
	}
	else{
		pushPin();
	}
}

</script>
</head>

<body>
<h1>Change Animation</h1>
<h3>(type run for Puppy and bounce for Push Pin)</h3>
<br/>

<form name="animation">
	<p>Type: <input name="choice" type="text" size="30" /></p>
	<input name="Submit" type="button" value="Change" onclick="check()"/>
</form>

<div id="play1" img src="puppy0.gif" ></div>
<div id="play2" img src="pin0.gif"></div>

</body>
</html>

This post has been edited by Dormilich: 11 December 2012 - 12:38 PM
Reason for edit:: fixed code tags

Was This Post Helpful? 0

#12 Dormilich

痛覚残留

Reputation: 2896

Posts: 7,549
Joined: 08-June 10

Re: Javascript program to display 1 of 2 animations based on user input

Posted 11 December 2012 - 12:43 PM

the loop() function of my previous post was simply there to explain matters. it certainly does not belong to your assignment in any way (you could say it is a stand-alone).

other than that, your logic still suffers. you want to start the loop when the user clicks the button, yet the check() function calls the image once.

Was This Post Helpful? 0

#13 NewToJavaScriptandLost

New D.I.C Head

Reputation: 0

Posts: 7
Joined: 10-December 12

Re: Javascript program to display 1 of 2 animations based on user input

Posted 11 December 2012 - 01:14 PM

Thanks for your help. I just don't understand. I thought that the check() function would call the runDog() function that would run the animation, not just display an image. It doesn't do either anyway. I appreciate your time.

Was This Post Helpful? 0

#14 Dormilich

痛覚残留

Reputation: 2896

Posts: 7,549
Joined: 08-June 10

Re: Javascript program to display 1 of 2 animations based on user input

Posted 11 December 2012 - 03:22 PM

indeed. the runDog() function only displays a single image. you would have to push the button repeatedly to get a kind of animation.

question, why are the images for runDog and bouncePin supposed to be in two different output elements?

Was This Post Helpful? 0

#15 raghav.naganathan

Perfectly Squared ;)

Reputation: 407

Posts: 1,440
Joined: 14-September 12

Re: Javascript program to display 1 of 2 animations based on user input

Posted 11 December 2012 - 09:25 PM

Note to OP.

Please don't open duplicate topics. ~~Case in point : Duplicate Topic~~

Mod, can you please merge the two topics.

regards,
Raghav

This post has been edited by Dormilich: 12 December 2012 - 03:45 AM
Reason for edit:: topics merged

Was This Post Helpful? 0

Page 1 of 1

14 Replies - 929 Views - Last Post: 11 December 2012 - 09:25 PM

Javascript program to display 1 of 2 animations based on user input

Replies To: Javascript program to display 1 of 2 animations based on user input

Re: Javascript program to display 1 of 2 animations based on user input

Re: Javascript program to display 1 of 2 animations based on user input

Re: Javascript program to display 1 of 2 animations based on user input

Re: Javascript program to display 1 of 2 animations based on user input

Re: Javascript program to display 1 of 2 animations based on user input

Re: Javascript program to display 1 of 2 animations based on user input

Re: Javascript program to display 1 of 2 animations based on user input

Re: Javascript program to display 1 of 2 animations based on user input

Re: Javascript program to display 1 of 2 animations based on user input

Re: Javascript program to display 1 of 2 animations based on user input

Re: Javascript program to display 1 of 2 animations based on user input

Re: Javascript program to display 1 of 2 animations based on user input

Re: Javascript program to display 1 of 2 animations based on user input

Re: Javascript program to display 1 of 2 animations based on user input

Follow & Share

Give It A Try!

Programming

Web Development

Reference Sheets

Bye Bye Ads

Monthly Drawing