HTML/Javascript Two person rock paper scissors game

Question

I recently started pursuing an informatics degree, and in one of my classes we are learning the basics (html, javascript, etc..). Using what I learned so far, I attempted to make a rock paper scissors game. However, this game has many flaws: 1. I need to figure out how to make the user1 pick go away while the user2 types their pick. 2. The function stating the outcome of the game only works when the first input is entered and then the second input is entered; not vice versa.

I am open to all comments/suggestions! here is the code:

<html>
<head>
<title>JAVASCRIPT 4</title>
<link href="js4 practice.css" rel="stylesheet" type"text/css">
</head>
<body>
<h1> Rock, Paper, Scissors Game'</h1>
<br>
<h2 class= "p1"> User One: </h2>
<h2 class= "p2"> User Two: </h2>
<input type="text" ID="compare()"/>
<input type="button" value="Enter" onClick="enter_Answer()"/>

<input type="text" ID="compare2()"/>
<input type="button" value="Enter" onClick="enter_Answer2();game();"/>


<p class="pic" id="pictureLocation"> </p>
<p class="pic2" id="pictureLocation2"> </p>
<p class="answer" id="answerLocation"> </p>


<script>
function enter_Answer() {
    var userPick = document.getElementById("compare()").value;  
    var r = "rock";
    var s = "scissors";
    var p = "paper";
    if  (userPick == r) {
        document.getElementById("pictureLocation").innerHTML ="<img src='images/rock.jpg' />";
    }
    else if  (userPick == s) {
        document.getElementById("pictureLocation").innerHTML ="<img src='images/scissors.jpg' />";
    }
    else if (userPick == p) {
        document.getElementById("pictureLocation").innerHTML ="<img src='images/paper.jpg' />";
    }
    else {

        document.getElementById("pictureLocation").innerHTML = "not a valid input";
    }
}
function enter_Answer2() {
    var userPick2 = document.getElementById("compare2()").value;    
    var userPick = document.getElementById("compare()").value;  

    var r = "rock";
    var s = "scissors";
    var p = "paper";
    if  (userPick2 == r) {
        document.getElementById("pictureLocation2").innerHTML ="<img src='images/rock.jpg' />";
    }
    else if  (userPick2 == s) {
        document.getElementById("pictureLocation2").innerHTML ="<img src='images/scissors.jpg' />";
    }
    else if (userPick2 == p) {
        document.getElementById("pictureLocation2").innerHTML ="<img src='images/paper.jpg' />";
    }
    else {

        document.getElementById("pictureLocation2").innerHTML = "not a valid input";
    }
}
 function game() {
    var userPick = document.getElementById("compare()").value;  
    var userPick2 = document.getElementById("compare2()").value;    
    var r = "rock";
    var s = "scissors";
    var p = "paper";
        if (userPick == userPick2) {
             document.getElementById("answerLocation").innerHTML = "it's a tie!";
        }
        else if ((userPick == r) && (userPick2 == s)) {
            document.getElementById("answerLocation").innerHTML = "user one wins!";
        }   
        else if ((userPick == r) && (userPick2 == p)) {
            document.getElementById("answerLocation").innerHTML = "user two wins!";
        } 
        else if ((userPick == s) && (userPick2 == p)) {
            document.getElementById("answerLocation").innerHTML = "user one wins!";
        } 
        else if ((userPick == s) && (userPick2 == r)) {
            document.getElementById("answerLocation").innerHTML = "user two wins!";
        } 
        else if ((userPick == p) && (userPick2 == s)) {
            document.getElementById("answerLocation").innerHTML = "user one wins!";
        } 
        else if ((userPick == p) && (userPick2 == s)) {
            document.getElementById("answerLocation").innerHTML = "user two wins!";

        }
}
</script>
</body>
</html>

See if you can use this: http://jsfiddle.net/h3TcP/4/ for a little inspiration. It will teach you about associative arrays. It would be a good exercise to convert it to a two player game and add images to the choices array. It's all based on this previous answer: https://stackoverflow.com/a/22623993/4665 — Jon P, Oct 24 '17 at 22:24

score 0 · Answer 1 · answered Oct 24 '17 at 21:31

0

It is because you are calling game() on second button. Based on your code you don't even need to click 2 buttons. Just enter your text in both text boxes and click 2nd enter button. You will get the winner.

answered Oct 24 '17 at 21:31

Praveen Alluri

307
2
14

nado · Answer 2 · 2017-10-24T22:03:57.997

I am having issues with it, when I enter 'r' for player one, it is saying my selection is invalid. I also noticed you have two text boxes and two buttons when you could do with one.

Without giving any code away to ruin your learning, you start with player 1. Player 1 enters a choice and if its valid player 2 is up. If player 2 enters a valid choice, the two are compared to find out who wins.

When you load up your game, you could set a variable to track the active player (1 or 2), when player 1 has input a valid choice, you simply update to active player to 2 and clear out the textbox.

Player 2 should then enter a valid answer and you then want to compare and say who won.

If you know anything about arrays, you could keep tabs of your active players selection in an array, for this you would need to use player 0 and player 1 rather than 1 and 2 as this will then correspond to the array index, so when player 0 is up, you pop the choice into array[activePlayer] and visa versa. Hope that makes sense.

HTML/Javascript Two person rock paper scissors game

2 Answers2