Message is not working right…
I am trying to get this game I made to display if you won, lost, or tied. As of now it just displays that you won. What is wrong? Any Help would be great!!!
Here is my Script:
// JavaScript Document
$(function(){
var numberPicked;
$('#Rock1').click(function(){
var numberPicked = 1;
$('#displayOne').html('<img src="images/rock.gif" />') });
$('#Paper1').click(function(){
var numberPicked = 2;
$('#displayOne').html('<img src="images/paper.gif" />') });
$('#Scissors1').click(function(){
var numberPicked = 3;
$('#displayOne').html('<img src="images/scissors.gif" />') });
$('#Lizard1').click(function(){
var numberPicked = 4;
$('#displayOne').html('<img src="images/lizard.gif" />') });
$('#Spock1').click(function(){
var numberPicked = 5;
$('#displayOne').html('<img src="images/spock.gif" />') });
$('#btnGo').click(function(){
var number = 1 + Math.floor(Math.random() * 5);
//alert("works");
//$('#displayTwo').html(number) });
if (number == 1){
$('#displayTwo').html('<img src="images/rock2.gif" />');
} else if (number == 2){
$('#displayTwo').html('<img src="images/paper2.gif" />');
} else if (number == 3){
$('#displayTwo').html('<img src="images/scissors2.gif" />');
} else if (number == 4){
$('#displayTwo').html('<img src="images/lizard2.gif" />');
} else if (number == 5){
$('#displayTwo').html('<img src="images/spock2.gif" />');
}
var ROCK = 1; var PAPER = 2; var SCISSORS = 3; var LIZARD = 4; var SPOCK = 5;
var message = 'You Win';
if (numberPicked == number){
message = 'You Tied';
} else if (numberPicked == ROCK){
if (number == SPOCK || number == PAPER){
message = 'You Lose';
}
} else if (numberPicked == PAPER){
if (number == SCISSORS || number == LIZARD){
message = 'You Lose';
}
} else if (numberPicked == SCISSORS){
if (number == SPOCK || number == ROCK){
message = 'You Lose';
}
} else if (numberPicked == LIZARD){
if (number == SCISSORS || number == ROCK){
message = 'You Lose';
}
} else if (numberPicked == SPOCK){
if (number == LIZARD || number == PAPER){
message = 'You Lose';
}
}
$('#displayWinner').html(message);
});
});
Here is the HTML if you need that too:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Rock-paper-scissors-lizard-Spock</title>
<link rel="stylesheet" type="text/css" href="RPSLS.css">
</head>
<body>
<h1>Rock-paper-scissors-lizard-Spock</h1>
<div id="wrapper">
<div id="playerOne">
<img id="Rock1" src="images/rock.gif" width="100" height="100" alt="Rock" /><br />
<img id="Paper1" src="images/paper.gif" width="100" height="100" alt="Paper" /><br />
<img id="Scissors1" src="images/scissors.gif" width="100" height="99" alt="Scissors" /><br />
<img id="Lizard1" src="images/lizard.gif" width="100" height="99" alt="Lizard" /><br />
<img id="Spock1" src="images/spock.gif" width="100" height="101" alt="Spock" /></div>
<div id="display">
<div id="displayOne"></div>
<div id="btn"><input type="button" id="btnGo" value="Go"></div>
<div id="displayWinner"></div>
<div id="displayTwo"></div>
</div>
<div id="playerTwo">
<img id="Rock2" src="images/rock2.gif" width="100" height="100" alt="Rock" /><br />
<img src="images/paper2.gif" width="100" height="100" alt="Paper" /><br />
<img src="images/scissors2.gif" width="100" height="99" alt="Scissors" /><br />
<img src="images/lizard2.gif" width="100" height="99" alt="Lizard" /><br />
<img src="images/spock2.gif" width="100" height="101" alt="Spock" /></div>
</div>
<p>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="RPSLS.js"></script>
</p>
</body>
</html>