Quick Rock, Paper, Scissors game

December 23, 2022

I’m trying to figure out how to know which button the person playing the game pressed because as of right now I have the values one by one, can I add the function and event listener to all three buttons or I was thinking maybe like a nodelist of the buttons and forEach them adding the functions.

const rock = document.querySelector('.rock');
const paper = document.querySelector('.paper');
const scissor = document.querySelector('.scissor');
const resetButton = document.querySelector('.reset');
const whoWonTheRound = document.querySelector('#log');
const computerLog = document.querySelector('#computer');
const humanLog = document.querySelector('#human');

//Computer Brain, selects random number between 0-2 and chooses a switch case.
const getComputerChoice = () => {
  let randomNum = Math.floor(Math.random() * 3);

  let text = '';
  switch (randomNum) {
    case 0:
      text = `rock`;
      break;
    case 1:
      text = `paper`;
      break;
    case 2:
      text = `scisscor`
      break;
  }
  return text
};

//See's who wins the round
const playRound = (playerSelection, computerSelection) => {
  if (playerSelection === rock && computerSelection === 'paper') {
    return whoWonTheRound.textContent = `You lose Paper beats Rock`;
  } else if (playerSelection === rock && computerSelection === 'scisscor') {
    return whoWonTheRound.textContent = `You win Rock beats Scisscor`;
  } else if (playerSelection === rock && computerSelection === 'rock') {
    return whoWonTheRound.textContent = `It's a DRAW!`
  } else if (playerSelection === paper && computerSelection === 'scisscor') {
    return whoWonTheRound.textContent = `You lose Scisscor beats Rock`;
  } else if (playerSelection === paper && computerSelection === 'rock') {
    return whoWonTheRound.textContent = `You win Paper beats Rock`;
  } else if (playerSelection === paper && computerSelection === 'paper') {
    return whoWonTheRound.textContent = `It's a DRAW!`
  } else if (playerSelection === scissor && computerSelection === 'rock') {
    return whoWonTheRound.textContent = `You lose Rock beats Scissor`;
  } else if (playerSelection === scissor && computerSelection === 'paper') {
    return whoWonTheRound.textContent = `You win Scissor beats Paper`;
  } else if (playerSelection === scissor && computerSelection === 'scissor') {
    return whoWonTheRound.textContent = `It's a DRAW!`;
  }
};

//Adding function togather 
const playerSelection = rock;
const computerSelection = getComputerChoice();
console.log(playRound(playerSelection, computerSelection));

//Calls the playRound() which plays one round to play 5 rounds using for loop
function game() {
  for (let i = 0; i < 5; i++) {
    playRound(playerSelection, computerSelection)
  }
};

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.header {
  text-align: center;
  margin-bottom: 20px;
  margin-top: 20px;
}

section {
  text-align: center;
  margin-bottom: 20px;
}

aside {
  text-align: center;
  margin-bottom: 20px;
}

h4 {
  margin-bottom: 5px;
}

button {
  padding: 5px;
}

footer {
  display: flex;
  justify-content: space-around;
  font-size: 1.5rem;
}

.reset {
  margin-bottom: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index.css">
  <script src="index.js" defer></script>
  <title>Rock Paper Scissors</title>
</head>

<body>
  <div class="header">
    <h1>Rock, Paper, Scissors!</h1>
    <h3>First one to 5 wins, wins the game!</h3>
  </div>
  <section>
    <h4>Select Your Play</h4>
    <button class="rock button1">Rock</button>
    <button class="paper button1">Paper</button>
    <button class="scissor button1">Scissors</button>
  </section>
  <aside>
    <button class="reset">Reset</button>
    <div id="log"></div>
  </aside>
  <footer>
    <div id="computer"></div>
    <div id="human"></div>
  </footer>
</body>

</html>

>Solution :

It looks like you want to add an event listener with .addEventListener(). To detect which button is pressed without adding an event listener for each button, you can add an event listener to the parent element of all the choice buttons, then use event propagation. Like this:

const choices = document.querySelector('#choices');
const resetButton = document.querySelector('.reset');
const whoWonTheRound = document.querySelector('#log');
const computerLog = document.querySelector('#computer');
const humanLog = document.querySelector('#human');

//Computer Brain, selects random number between 0-2 and chooses a switch case.
const getComputerChoice = () => {
  let randomNum = Math.floor(Math.random() * 3);

  let text = '';
  switch (randomNum) {
    case 0:
      text = `rock`;
      break;
    case 1:
      text = `paper`;
      break;
    case 2:
      text = `scisscor`
      break;
  }
  return text
};

//See's who wins the round
const playRound = (playerSelection, computerSelection) => {
  if (playerSelection === 'rock' && computerSelection === 'paper') {
    return whoWonTheRound.textContent = `You lose Paper beats Rock`;
  } else if (playerSelection === 'rock' && computerSelection === 'scisscor') {
    return whoWonTheRound.textContent = `You win Rock beats Scisscor`;
  } else if (playerSelection === 'rock' && computerSelection === 'rock') {
    return whoWonTheRound.textContent = `It's a DRAW!`
  } else if (playerSelection === 'paper' && computerSelection === 'scisscor') {
    return whoWonTheRound.textContent = `You lose Scisscor beats Rock`;
  } else if (playerSelection === 'paper' && computerSelection === 'rock') {
    return whoWonTheRound.textContent = `You win Paper beats Rock`;
  } else if (playerSelection === 'paper' && computerSelection === 'paper') {
    return whoWonTheRound.textContent = `It's a DRAW!`
  } else if (playerSelection === 'scissors' && computerSelection === 'rock') {
    return whoWonTheRound.textContent = `You lose Rock beats Scissor`;
  } else if (playerSelection === 'scissors' && computerSelection === 'paper') {
    return whoWonTheRound.textContent = `You win Scissor beats Paper`;
  } else if (playerSelection === 'scissors' && computerSelection === 'scissor') {
    return whoWonTheRound.textContent = `It's a DRAW!`;
  }
};

let gameCount = 0;
choices.addEventListener('click', e => {
  if (e.target.tagName != 'BUTTON') return;
  if (gameCount++ >= 5) {
    console.log('5 round played. Game is over');
    return;
  }
  playRound(e.target.textContent.toLowerCase(), getComputerChoice())
});

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.header {
  text-align: center;
  margin-bottom: 20px;
  margin-top: 20px;
}

section {
  text-align: center;
  margin-bottom: 20px;
}

aside {
  text-align: center;
  margin-bottom: 20px;
}

h4 {
  margin-bottom: 5px;
}

button {
  padding: 5px;
}

footer {
  display: flex;
  justify-content: space-around;
  font-size: 1.5rem;
}

.reset {
  margin-bottom: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index.css">
  <script src="index.js" defer></script>
  <title>Rock Paper Scissors</title>
</head>

<body>
  <div class="header">
    <h1>Rock, Paper, Scissors!</h1>
    <h3>First one to 5 wins, wins the game!</h3>
  </div>
  <section id="choices">
    <h4>Select Your Play</h4>
    <button class="rock button1">Rock</button>
    <button class="paper button1">Paper</button>
    <button class="scissor button1">Scissors</button>
  </section>
  <aside>
    <button class="reset">Reset</button>
    <div id="log"></div>
  </aside>
  <footer>
    <div id="computer"></div>
    <div id="human"></div>
  </footer>
</body>

</html>