Question 243254 in Html Question posted in
Some basic documentation can be found here.

Html – playerSelection() is not returning but its getting passed a string value? [Rock paper scissors game]

Hello, i am currently revisiting a rock paper scissors game in html/css/javascript. Now i am trying to make a corresponding website where you can click the button and it logs your playerChoice in that way. Afterwards its gonna start the game and print winner, rounds etc.. .It seems the playerSelection function is not working correctly. The playerChoice = this.id seems to be working correctly, but the playerSelection function is not console logging anything. I also wonder if i need to change anything in order to take the String out of the function and compare it (see playRound function). If you happen to know something about this please let me know 🙂

This is my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script defer src="script.js" type="text/javascript"></script>
    <title>Rock, Paper, Scissors</title>
</head>
<body>
    <h1>Rock, Paper, Scissors</h1>
    <p>Play against the computer. First to 5 points wins the game!</p>
    <h2>Select a Move:</h2>

    <div id="Buttons">
        <button id="ROCK">ROCK</button>
        <button id="PAPER">PAPER</button>
        <button id="SCISSORS">SCISSORS</button>
    </div>
    
    <p id="roundTxt"></p>

    <h2>Scores:</h2>

    <ul id="scoresBox">
        <h3>Player: </h3>
        <div id="SCORES_HUMAN">0</div>
        <h3>Computer: </h3> 
        <div id="SCORES_COMPUTER">0</div>
    </ul>
</body>
</html>

This is my javascript:

document.getElementById("ROCK").onclick = playerSelection;
document.getElementById("PAPER").onclick = playerSelection;
document.getElementById("SCISSORS").onclick = playerSelection;



function getComputerChoice (){
    //select Rock Paper or Scissors at random
    //return the choice
    const PICK = ["Rock", "Paper", "Scissors"];

    const random = Math.floor(Math.random() * PICK.length);
    return (PICK[random]);

}

function playerSelection() {
    //prompt user for their choice
    //return the choice
    //let playerChoice = prompt("Rock, Paper, or Scissors?");
    playerChoice = this.id;
    return playerChoice;
}
console.log(playerSelection());


function game() {
    //Scoreboard
    let SCORES_HUMAN = 0;
    let SCORES_COMPUTER = 0;

    //for(let i = 0; i<5; i++) {
        playRound(playerSelection(), getComputerChoice());
        console.log(playRound(playerSelection(), getComputerChoice()));
        
    //}

    if(SCORES_HUMAN > SCORES_COMPUTER) {
        console.log("You Win!");
    } else if(SCORES_HUMAN < SCORES_COMPUTER) {
        console.log("You Lose!");
    }
    
    console.log("HUMAN: "+ SCORES_HUMAN +" COMPUTER: "+ SCORES_COMPUTER);


    function playRound(playerSelection, getComputerChoice) {
        //compare playerSelection to getComputerChoice
        //return the outcome
        if (playerSelection === "ROCK" && getComputerChoice === "Scissors") {
            SCORES_HUMAN++;
            return "You Win! Rock beats Scissors";
        } else if (playerSelection === "ROCK" && getComputerChoice === "Paper") {
            SCORES_COMPUTER++;
            return "You Lose! Paper beats Rock";
        } else if (playerSelection === "PAPER" && getComputerChoice === "Rock") {
            SCORES_HUMAN++;
            return "You Win! Paper beats Rock";
        } else if (playerSelection === "PAPER" && getComputerChoice === "Scissors") {
            SCORES_COMPUTER++;
            return "You Lose! Scissors beats Paper";
        } else if (playerSelection === "SCISSORS" && getComputerChoice === "Paper") {
            SCORES_HUMAN++;
            return "You Win! Scissors beats Paper";
        } else if (playerSelection === "SCISSORS" && getComputerChoice === "Rock") {
            SCORES_COMPUTER++;
            return "You Lose! Rock beats Scissors";
        } else {
            return "It's a tie!";
        }

    }
}

game();

This is my css:

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin-left: 50px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

p {
    font-size: 18px;
  }

button {
    border: .3rem solid rgb(255, 0, 0);
    border-radius: .5rem;
    margin: .75rem;
    font-size: 1rem;
    font-weight: bold;
    padding: .75rem .5rem;
    width: 6rem;
    text-align: center;
    color: white;
    background: rgb(89, 89, 89);
    text-shadow: 0 0 .5rem rgb(229, 229, 229);
}

button:hover {
    cursor: pointer;
}

button:active {
    background-color: rgba(92, 92, 92, 0.208);
}


.Buttones {
    flex: display;
    align-self: center;
}

I appreciate any help i get and thank you for reading 🙂

Clicking the rock button (or paper/scissors button) will pass on the string "rock" into the playround function and the game will be played out correctly.

Tags:

2

Answers


  1. 0

    because ‘this’ in playerSelection function points to the function not the event.
    pass event argument to playerSelection function

    function playerSelection(e) { ... }
    Login or Signup to reply.
  2. 0

    A number of issues with your code.

    1. Calling playRound() twice:
    playRound(playerSelection(), getComputerChoice());
console.log(playRound(playerSelection(), getComputerChoice()));

    I understand that you’re trying to see what playRound() is doing, but in actuality this is executing every "round" twice. You already have text statements being returned in playRound(), so either

    • change your returns to console.log()s and just call playRound(playerSelection(), getComputerChoice()), OR
    • remove the call to playRound() which is not inside the console.log(), and leave playRound() as is.

    1. As mentioned by Ahmed above, you are not passing the event of the click but a reference to the function itself. You will need to listen to the event emitted when pressing the button in order to correctly process the player’s selection

    2. A minor point, but you mention in the html doc that the first player to 5 wins, however you only allow 5 rounds to be played with your (commented out) for-loop. Instead, use a while-loop like the one below:

    while (SCORES_HUMAN < 5 and SCORES_COMPUTER < 5){
    playRound(playerSelection(), getComputerChoice());
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search