Jeremy Hernandez Jeremy Hernandez - 19 days ago 5
CSS Question

Issue assigning variables and connecting them to my If-statements. Advice?

This JavaScript program will let the user play Rock, Paper, Scissors against the computer. If the player wishes to play the game, he should press a button to begin play. The program will prompt the player to input a choice of “rock” for Rock, “paper” for Paper, “scissors” for Scissors, "Lizard" for lizard, and "spock" for Spock. The computer “player” will generate a random number to indicate it’s choice.

The program will then display who won the game (computer or player) along with the choices made by the computer and player.

The issue I am having is that when var "UserChoice" puts in their answer inside of the text-box and they click "Submit" the screen goes blank. I also don't know how to neatly put down my "IF" statements without having a massive list. I am extremely new to JavaScript so my skills and abilities are at a low level. Thank you for the help!

CSS

body {
background-color: #1D6EB0;
}

h1 {
font-family: Cambria, sans-serif;
font-size: 45px;
color: #FFFFFF;
}

button {
background-color: #FFFFFF;
padding: 10px 25px;


}

input[type=text] {
-webkit-transition: width 20.4s ease-in-out;
transition: width 20.0s ease-in-out;
padding: 12px 20px;
margin: 8px 0;
}

input[type=text]:focus {
width: 40%;
}


HTML




<head>
<title> RPSSL </title>
</head>

<div style="width:1331px; height:62px ;border:6px; background-color:#263035">
<center><h1>Rock, Paper, Scissors, Lizard, and Spock</h1></center></div>

<center>
<img src="http://www.thinkgeek.com/images/products/additional/large/b597_rock_papaer_scissors_lizard_spock_dd.jpg"
width= "350" height= "350">

<br>

<input type="text" placeholder="Make your choice...">

<br>

<button type="submit" value="Submit" id="user" onclick="Game();" > Good Luck!

</center>

</body>
</html>


JavaScript

var rock = 1;
var paper = 2;
var scissors = 3;
var spock = 4;
var lizard = 5;

var ComputerChoice = Math.floor(Math.random() * 5 + 1);
var UserChoice = document.getElementById("user").value;

function Game() {

if (UserChoice === ComputerChoice) {
document.getElementById("user").value = "<h2>Its a tie! Your opponent also chose </h2>" + ComputerChoice;

}

if (ComputerChoice == 1) {
(UserChoice == 2, 3)
document.getElementById("user").innerHTML = "<h2>You won! The computer chose</h2>" + ComputerChoice;
} else {
(UserChoice == 4, 5)
document.getElementById("user").innerHTML = "<h2>You lost! The computer chose</h2>" + ComputerChoice;
}

if (ComputerChoice == 2) {

(UserChoice == 5, 3)
document.getElementById("user").innerHTML = "<h2>You won! The computer chose</h2>" + ComputerChoice;
} else {
(UserChoice == 1, 4)
document.getElementById("user").innerHTML = "<h2>You lost! The computer chose</h2>" + ComputerChoice;
}

if (ComputerChoice == 3) {

(UserChoice == 4, 1)
document.getElementById("user").innerHTML = "<h2>You won! The computer chose</h2>" + ComputerChoice;
} else {
(UserChoice == 2, 5)
document.getElementById("user").innerHTML = "<h2>You lost! The computer chose</h2>" + ComputerChoice;
}

if (ComputerChoice == 4) {

(UserChoice == 5, 2)
document.getElementById("user").innerHTML = "<h2>You won! The computer chose</h2>" + ComputerChoice;
} else {
(UserChoice == 3, 1)
document.getElementById("user").innerHTML = "<h2>You lost! The computer chose</h2>" + ComputerChoice;
}

if (ComputerChoice == 5) {

(UserChoice == 3, 1)
document.getElementById("user").innerHTML = "<h2>You won! The computer chose</h2>" + ComputerChoice;
} else {
(UserChoice == 2, 4)
document.getElementById("user").innerHTML = "<h2>You lost! The computer chose</h2>" + ComputerChoice;
}
if (UserChoice == "") {
document.getElementById("user").innerHTML = "<h2> Uhhh, you didnt win or lose. You forgot to TYPE!!!"
}

}

Answer

Although I would recommend to use case statements...

Please follow this syntax:

 if (ComputerChoice == 1) {
   if(UserChoice == 2 || UserChoice == 3) {
    document.getElementById("user").innerHTML = "<h2>You won! The computer chose</h2>" + ComputerChoice;
   } else if(UserChoice == 4 || UserChoice == 5) {
    document.getElementById("user").innerHTML = "<h2>You lost! The computer chose</h2>" + ComputerChoice;
   }
 } else if { ....

The || means "or". So you basically say "If UserChoice is 2 or UserChoice is 3, then...."

Good luck