CODEWITHSUNDEEP
javascripthtmlif-statementboolean
ak39464
ak39464

Reputation: 110

I am having a hard time receiving any output from the computer. Misuse of variables? Or Issue with my If-statements?

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!

HTML 

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

  <div style="width:1331px; height:62px ;border:6px; background-color:#263035"> <!-- Header -->
     <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= "400" height= "400">

<form onsubmit="Game()"> <!-- Textbox and submit button -->
<input type="text" id=user onsubmit="UserChoice" placeholder="Make your choice...">
<input type="submit" value="Submit">
</form>

JavaScript

 var rock = 1;

 var paper = 2;

 var scissors = 3;

 var spock = 4;

 var lizard = 5;

 function Game() {

 var ComputerChoice = ((Math.Random() * 5) + 1); // from 1 - 5 it chooses one of the given variables to then compare to the users anwser

 var UserChoice = document.getElementById("user").value; // input from the textbox

 if (UserChoice == ComputerChoice) { // if both anwsers are the same then a tie is given

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

 }

 if (ComputerChoice == 1) { // Makes the computers choice readable for the user
    return "Rock";
 }

 if (ComputerChoice == 2) {
    return "Paper";
 }
 if (ComputerChoice == 3) {
    return "Scissors";
 }
 if (ComputerChoice == 4) {
    return "Spock";
 }
 if (ComputerChoice == 5) {
    return "Lizard";
 }

 if (ComputerChoice == 1 && UserChoice == 2) { // how the computer decides winner

    document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;

 }

 if (ComputerChoice == 1 && UserChoice == 3) {

    document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;

 }

 if (ComputerChoice == 1 && UserChoice == 4) {

    document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;

 }

 if (ComputerChoice == 1 && UserChoice == 3) {

    document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;

 }

 if (ComputerChoice == 2 && UserChoice == 1) {

    document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;

 }

 if (ComputerChoice == 2 && UserChoice == 3) {

    document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;

 }

 if (ComputerChoice == 2 && UserChoice == 4) {

    document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;

 }

 if (ComputerChoice == 2 && UserChoice == 3) {

    document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;

 }

 if (ComputerChoice == 3 && UserChoice == 1) {

    document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;

 }

 if (ComputerChoice == 3 && UserChoice == 2) {

    document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;

 }

 if (ComputerChoice == 3 && UserChoice == 4) {

    document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;

 }

 if (ComputerChoice == 3 && UserChoice == 3) {
    document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;

 }

 if (ComputerChoice == 4 && UserChoice == 1) {

    document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;

 }

 if (ComputerChoice == 4 && UserChoice == 2) {

    document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;

 }

 if (ComputerChoice == 4 && UserChoice == 5) {

    document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;

 }

 if (ComputerChoice == 4 && UserChoice == 3) {

    document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;

 }

 if (ComputerChoice == 5 && UserChoice == 1) {

    document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;

 }

 if (ComputerChoice == 5 && UserChoice == 2) {

    document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;

 }

 if (ComputerChoice == 5 && UserChoice == 4) {

    document.getElementById("user").innerHTML = "<h1>You won! The computer chose</h1>" + ComputerChoice;

 }

 if (ComputerChoice == 5 && UserChoice == 3) {

    document.getElementById("user").innerHTML = "<h1>You lost! The computer chose</h1>" + ComputerChoice;

 }

 }

Upvotes: 0

Views: 42

Answers (1)

SLaks
SLaks

Reputation: 887757

You need to return false from the onsubmit handler to stop the form from submitting.

In fact, you shouldn't use a <form> in the first place.

Upvotes: 1

Related Questions