Skip to content

How to pass two parameters in one function on separate occasions?

Intro

I am trying to make a rock, paper scissors game. I need to save 2 player inputs in 1 function (preferably). So when playerOne clicks on “rock” and playerTwo clicks on “paper” it will save that too.

Separate variables, same function.

Requirements

  • Can’t use any libraries, must be 100% vanilla JS.

What I currently have

function getPlayerOption(playerOne, playerTwo) {
  console.log(playerOne);
  console.log(playerTwo);
}
h1 {
  text-align: center;
}

#player_turn {
  color: rgb(255, 0, 0);
}

.container {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-around;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Rock, paper, scissors!</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>

<body>
  <h1>Player <span id="player_turn">1</span> pick an option!</h1>
  <div class="container">
    <div class="box">
      <p onclick="getPlayerOption('rock')" id="rock">
        Rock
      </p>
    </div>
    <div class="box">
      <p onclick="getPlayerOption('paper')" id="paper">
        Paper
      </p>
    </div>
    <div class="box">
      <p onclick="getPlayerOption('scissors')" id="scissors">
        Scissors
      </p>
    </div>
  </div>
</body>

</html>

Output that I want

First click is on “rock” and second click is one “paper” output in console will be:

Console;
-> "rock"
-> "paper"

Thank you for your time and efforts.

Answer

You could create a class for the game and store the inputs in member variables.

class Game {
  playerOne = null;
  playerTwo = null;
  getPlayerOption(input) {
    if (this.playerOne) {
      this.playerTwo = input;
      this.print();
      this.reset();
    } else {
      this.playerOne = input;
    }
  }
  print() {
    console.log(this.playerOne);
    console.log(this.playerTwo);
  }
  reset() {
    this.playerOne = null;
    this.playerTwo = null;
  }
}

const game = new Game();
h1 {
  text-align: center;
}

#player_turn {
  color: rgb(255, 0, 0);
}

.container {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-around;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Rock, paper, scissors!</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>

<body>
  <h1>Player <span id="player_turn">1</span> pick an option!</h1>
  <div class="container">
    <div class="box">
      <p onclick="game.getPlayerOption('rock')" id="rock">
        Rock
      </p>
    </div>
    <div class="box">
      <p onclick="game.getPlayerOption('paper')" id="paper">
        Paper
      </p>
    </div>
    <div class="box">
      <p onclick="game.getPlayerOption('scissors')" id="scissors">
        Scissors
      </p>
    </div>
  </div>
</body>

</html>