Getting my buttons in Rock, Paper, Scissors project to trigger a round


I’ve been able to get the buttons to play the 3 round game with ONLY the selection made for each round. for example, the player chooses rock and plays three rounds with a rock. I’m trying to get this button press to A. input the value of ‘ROCK’ into the playerSelection variable and B. get it to trigger the computerPlay() that will write the computer’s choice into the ComputerSelection variable. I’ve been able to get the playerSelection variable to reflect the player’s actual choice, but I can’t get the computerPlay() to run and store it’s value in the relevant variable. I hope I explained my issue clearly. When I try to run the playRound() with the addEventListener it returns undefined, because computerSelection is never defined by a value. Anyways, this is where I’ve left it. It doesn’t work, but I hoped it would give whoever can help some insight into what I’m trying to do:

OCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Rock Paper Scissors</title>

    <link href="styles.css" rel="stylesheet" type="text/css">


  <div id="container">
    <button id="button-rock">ROCK</button>
    <button id="button-paper">PAPER</button>
    <button id="button-scissors">SCISSORS</button>



    let playerScore = 0;
    let computerScore = 0;
    let playerSelection;

    const rockButton = document.getElementById('button-rock');
    const paperButton = document.getElementById('button-paper');
    const scissorsButton = document.getElementById('button-scissors');

    // rockButton.addEventListener('click', comp1());
    // paperButton.addEventListener('click', comp2());
    // scissorsButton.addEventListener('click', comp3());

    alert( 'Welcome to rock, paper, scissors!')

    // playGame();

    //Calculates Computer's turn
    function computerPlay() {
        let number = Math.floor(Math.random() * (3 + 1));
        if(number == 1)
            return 'Rock';
        else if(number == 2)
            return 'Paper';
        else return 'Scissors';
    // Plays three rounds of rock, paper, scissors.
    function playGame() {
        while ( playerScore < 3 && computerScore < 3 ) {
            // let playerSelection = prompt(' Enter Rock, Paper, or Scissors');
            let computerSelection = computerPlay();
            playerSelection = playerSelection.toUpperCase();
            computerSelection = computerSelection.toUpperCase();
            console.log(playRound(playerSelection, computerSelection));

    // Plays one round.
    function playRound(playerSelection, computerSelection) {
        switch (playerSelection + computerSelection) {

            case 'ROCKSCISSORS':
            case 'PAPERROCK':
            case 'SCISSORSPAPER':
                playerScore +=1;
                return playerSelection + ' wins vs ' + computerSelection +
                '. Congratulations!';

            case 'ROCKPAPER':
            case 'PAPERSCISSORS':
            case 'SCISSORSROCK':
                computerScore +=1;
                return playerSelection + ' loses vs ' + computerSelection +
                '. Try again!';

            case 'ROCKROCK':
            case 'PAPERPAPER':
            case 'SCISSORSSCISSORS':
                return playerSelection + ' ties with ' + computerSelection +
                '. Try again!';


    //Displays winner of the game.
    function checkWinner() {
        if( playerScore >= 3 ) {
            console.log('Player Wins!');
        if( computerScore >= 3 ) {
            console.log('Computer Wins!');

function main() {
  rockButton.addEventListener('click', function (e) {
    playerSelection = 'ROCK';
    computerSelection = computerPlay();
    console.log(playRound(playerSelection, computerSelection));
  paperButton.addEventListener('click', () => playRound('PAPER'));
  scissorsButton.addEventListener('click', () => playRound('SCISSORS'));




Thank you, and sorry for the long-winded post, but I wanted to make my issues as clear as possible.

Edit: The last section of code is where I’m having trouble.


you are not calling the playGame function from anywhere.


I’m not trying to call the playGame function at this time. I’m just trying to run the playRound (runs 1 round of RPS and outputs the results). Is this not possible? It always returns undefined when I try to plug both values into that function.


In that case I think you need to do the below.

let computerSelection = computerPlay();
computerSelection = computerSelection.toUpperCase();


Where in the code would this even go? I put it in the playRound function and it returns an error saying computerSelection is already defined (but I can’t see where that even happens), and when I put it in the button with evenListener it returns undefined. I’m at a loss and can’t figure out how to make this function work with the player selecting instead of inputting.