Quick Rock, Paper, Scissors game-CodePudding

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 >
    <h1>Rock, Paper, Scissors!</h1>
    <h3>First one to 5 wins, wins the game!</h3>
  </div>
  <section>
    <h4>Select Your Play</h4>
    <button >Rock</button>
    <button >Paper</button>
    <button >Scissors</button>
  </section>
  <aside>
    <button >Reset</button>
    <div id="log"></div>
  </aside>
  <footer>
    <div id="computer"></div>
    <div id="human"></div>
  </footer>
</body>

</html>

CodePudding user response：

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 >
    <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 >Rock</button>
    <button >Paper</button>
    <button >Scissors</button>
  </section>
  <aside>
    <button >Reset</button>
    <div id="log"></div>
  </aside>
  <footer>
    <div id="computer"></div>
    <div id="human"></div>
  </footer>
</body>

</html>

CodePudding user response：

For this type of behaviour you could implement a new function, which takes the selection as a parameter.

Create a new function:

function playerSelection(selection) {
    if(selection === 'paper') {
        // do something
    }
    if(selection === 'rock') {
        // do something
    }
    if(selection === 'scissor') {
        // do something
    }
}

Now, you can call the function whenever you click with the onclick event:

  <section>
      <h4>Select Your Play</h4>
       <button onclick="playerSelection('rock')">Rock</button>
       <button onclick="playerSelection('paper')">Paper</button>
       <button onclick="playerSelection('scissor')">Scissors</button>
  </section>