Help with Javascript

#1
Soupturkey

Posted 15 May 2010 - 12:57 PM

Newbie

Members
1 posts

I'm sure this will seem extremely simple for some (or maybe all) of you but for the life of me I cannot figure it out.

I am trying to have this page allow the user to input heads or tails (case insensitive) into the first two boxes. The second two boxes show what two coins were flipped and the outcome box tells the user if they won or lost.

<html> 

<head>

<title>Guess Two Coin Tosses</title>


<script>

function flip2(){

	

	var guess1 = document.getElementById('guess1').value

	var guess2 = document.getElementById('guess2').value

	var flip1 = Math.floor(Math.random() * 2)

	var flip2 = Math.floor(Math.random() * 2)

	var outcomes



        if (flip1 == guess1) {

	   if (flip2 == guess1)

              outcomes = 'win win';

	   else 

	      outcomes = 'win lose';

           if (flip1 == 1)

              flip1 = "Heads";

           else

              flip1 = "Tails" ;

           if (flip2 == 1)

              flip2 = "Heads";

           else

              flip2 = "Tails" ;

	}

	else { 

	   if (flip2 == guess2)

	      outcomes = 'lose win';

	   else 

	      outcomes = 'lose lose';

           if (flip1 == 1)

              flip1 = "Heads";

           else

              flip1 = "Tails" ;

           if (flip2 == 1)

              flip2 = "Heads";

           else

              flip2 = "Tails" ;

	}


	document.getElementById('flip1').value = flip1

	document.getElementById('flip2').value = flip2

	document.getElementById('outcomes').value = outcomes

}

	

</script>


</head>


<body>

<h3>Guess Two Coin Flips</h3>

Enter Heads for Heads, Tails for Tails

<p/>Your Guess for Flip-1: 

<input type="text" id="guess1"  size="5" value="" />

<p/>Your Guess for Flip-2: 


<input type="text" id="guess2" size="5" value="" />


<p/>Flip-1: 

<input type="text" id="flip1"  size="5" value="???" />

<p/>Flip-2: 

<input type="text" id="flip2"  size="5" value="???" />


<p/><input type="button" value="Flip Two!" 

 onclick="flip2()" />

<p/>Outcomes: 

<input type="text" id="outcomes" size="20" value="" />

</body>

</html>

#2
DarkLordoftheMonkeys

Posted 15 May 2010 - 09:03 PM

Programming Professional

Members
255 posts

Could you phrase your question better? It's very confusing.

Life's too short to be cool. Be a nerd.

#3
Hignar

Posted 16 May 2010 - 02:16 AM

Programming Expert

Members
420 posts

I'm guessing what the OP is asking is 'why doesn't it work as I expect?'.

A few points

1) Use semicolons to end statements

2) You're testing to see if the flip results match the guesses before you've assigned heads or tails to the flips. In your code the line

if (flip1 == guess1)

is comparing an integer (flip1) against a string (guess1). You need to assign either heads or tails to the flips prior to the comparison. In turn this means you can remove the assignment from within the if statement which tidies your code up quite a bit.

3) There's an error in your logic statements.

if (flip2 == guess1)

presumably you want to be comparing flip2 to guess2

4) You code is still case sensitive. You can get around this using the toLowerCase() function on each guess while hard coding the flip results to be lower case. So when getting the value for guess1 you could use.

var guess1 = document.getElementById('guess1').value.toLowerCase()

5) You are open to user error. You should consider replacing the text boxes used for the guesses with a combo box.

After making the necessary adjustments I had the game running as expected.

Hope this helps.

If there's a new way, I'll be the first in line.

But, it better work this time.