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

Question

0.00/5 (No votes)

See more:

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.

HTML

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

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

 <center>
    

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

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;

 }

 }

What I have tried:

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!

Posted 19-Nov-16 17:23pm

Member 12860021

Updated 19-Nov-16 20:14pm

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Answer 1 · 2016-11-19T19:19:00

Solution 1

You can use switch case instead of ao many ifs.

When user submits, show a loading image and when you are ready to show the result, just before that, hide that loading image.

Posted 19-Nov-16 19:19pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Patrice T · Answer 2 · 2016-11-19T19:57:00

JavaScript

    if (ComputerChoice == 1) {
    return "Rock";
}
if (ComputerChoice == 2) {
    return "Paper";
}
if (ComputerChoice == 3) {
    return "Scissors";
}
if (ComputerChoice == 4) {
    return "Spock";
}
if (ComputerChoice == 5) {
    return "Lizard";
}
    // Your code will never go beyond this point because of the returns

You should learn to use the debugger as soon as possible. Rather than guessing what your code is doing, It is time to see your code executing and ensuring that it does what you expect.

The debugger allow you to follow the execution line by line, inspect variables and you will see that there is a point where it stop doing what you expect.
Debugger - Wikipedia, the free encyclopedia[^]
JavaScript Debugging[^]

The debugger is here to show you what your code is doing and your task is to compare with what it should do.
There is no magic in the debugger, it don't find bugs, it just help you to. When the code don't do what is expected, you are close to a bug.

Peter Leow · Answer 3 · 2016-11-19T20:14:00

There are many issues:
1. It should be

Math.random()

not

Math.Random()

JavaScript random() Method[^]
and it returns a floating number, not integer that you wanted, you have to floor it using Math.floor() method.
2. The default behaviour of a form submit is to submit the form data to server-side and refresh the page itself, that explained why you got a blank page after pressing the submit button. To cancel this default behaviour, you have to return false from your JavaScript function, e.g.

HTML

<form onsubmit="return Game()">

function Game() {
  // all preceding code
  return false;
}

3. Whom do you expect these code to "return" their value to?

C#

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";
}

You should put them inside a function, and call it from inside the Game().
4. Why is there this onsubmit="UserChoice" in here? Remember to enclose the id value with quotes.

HTML

<input type="text" id=user onsubmit="UserChoice" placeholder="Make your choice...">

5. Use if...else if... construct to avoid having to check through all if's JavaScript If...Else Statements[^]
6. Lastly, you are trying to display the result inside a input textbox with h1 tag, it will not work.
You should display the result in another placement div, e.g.

<div id="result"></div>

Then display the result in this div thru JavaScript, e.g.

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

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

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0