How do I breakout from a loop and stop a counter variable in Jascript?

user_18990256 0
Viewed 82

const array = ['rock', 'paper', 'scissors'];
function choice() {
let arrayChoice = array[Math.floor(Math.random() * 3)];
return arrayChoice;
}
choice()

const result = textContent = document.querySelector('#result')
const rock = document.querySelector('#rock')
const paper = document.querySelector('#scissors')
const scissors = document.querySelector('#paper')
const playerGame = document.querySelector('.player--game')
const computerGame = document.querySelector('.computer--game')
const playerScore = document.querySelector('.player-score')
const computerScore = document.querySelector('.computer-score')

let playerPoint = 0;
let computerPoint = 0;

function playRound(player, computer) {
  rock.addEventListener('click', () => {
  let player = 'rock';
  computer = choice();
  if(computer == 'paper' && player == 'rock') {
    computerPoint++;
    computerScore.textContent = computerPoint;
    result.textContent = 'paper beats rock'
  }else if(computer == 'scissors' && player == 'rock') {
    playerPoint++;
    playerScore.textContent = playerPoint;
    result.textContent = 'rock beats scissors'
  }else if(computer == 'rock' && player == 'rock') {
    result.textContent = 'I\'ts a tie';
  }
  
  playerGame.innerHTML +='<br>' + '<br> '+ player;
  computerGame.innerHTML +='<br>' + '<br> '+ computer;
  })

paper.addEventListener('click', () => {
  player = 'paper'
  computer = choice();
  if(computer == 'scissors' && player == 'paper') {
    computerPoint++;
    computerScore.textContent = computerPoint;
    result.textContent = 'scissors beats paper';
  }else if(computer == 'rock' && player == 'paper'){
    playerPoint++;
    playerScore.textContent = playerPoint;
    result.textContent = 'paper beats rock';
  }else if(computer == 'paper' && player == 'paper') {
    result.textContent = 'I\'ts a tie';
  }

  playerGame.innerHTML += '<br>' + '<br>'+ player;
  computerGame.innerHTML += '<br>' + '<br>'+ computer;
})


scissors.addEventListener('click', () => {
  let player = 'scissors';
  computer = choice();
  if(computer == 'paper' && player == 'scissors') {
    playerPoint++;
    playerScore.textContent = playerPoint;
    result.textContent = 'scissors beats paper';
  }else if(computer == 'rock' && player == 'scissors') {
    computerPoint++;
    computerScore.textContent = computerPoint;
    result.textContent = 'rock beats scissors';
  }else if(computer == 'scissors' && player == 'scissors') {
    result.textContent = 'I\'ts a tie';
  }
  
  playerGame.innerHTML += '<br>' + '<br>'+ player;
  computerGame.innerHTML += '<br>' + '<br>'+ computer;
})
}
playRound()




const buttons = document.querySelectorAll('button'); 
  buttons.forEach((button) => {
  button.addEventListener('click', () => {
    for(let i = 0; i < 5; i++) {
      if(playerPoint >= 5 && computerPoint < 5) {
        result.textContent = "Player Won";
      }else if(playerPoint < 5 && computerPoint >= 5) {
        result.textContent = "Computer Won";
      }
    }
  });
});
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
button {
  padding: 1em;
}

#result {
  text-align: center;
  margin: 2em 0;
}

.container {
  display: flex; 
}

p {
  margin: 1em;
}

.score-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Rock,Paper,Scissors</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div>
    <div id="object container">
    <button id="rock">Rock</button>
    <button id="scissors">paper</button>
    <button id="paper">scissors</button>
  </div>

    <!--result-->
    <div id="result">--</div>

    <!--counter board-->
    <div class="score-board">
      <p class="player-score">0</p>
      <p>:</p>
      <p class="computer-score">0</p>
    </div>

    <!--player game played-->
  <div class="container">
    <div>
      <p>player</p>
      <p class="player--game"></p>
    </div>

    <!--computer game played-->
    <div>
      <p>computer</p>
      <p class="computer--game"></p>
    </div>
  </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

I am a building a ROCK,PAPER,SCISSORS project that counts the score between a player and computer and whoever gets to 5 points the game has to stop and display the winner of the 5 round, and I have been stuck trying to write a for-loop that breaks the counter when a player hits 5 points, but nothing seems to be working the counter, keeps counter even when the condition is met when a player hits 5 point. Here is my code below

const array = ['rock', 'paper', 'scissors'];
function choice() {
let arrayChoice = array[Math.floor(Math.random() * 3)];
return arrayChoice;
}
choice()

const result = textContent = document.querySelector('#result')
const rock = document.querySelector('#rock')
const paper = document.querySelector('#scissors')
const scissors = document.querySelector('#paper')
const playerGame = document.querySelector('.player--game')
const computerGame = document.querySelector('.computer--game')
const playerScore = document.querySelector('.player-score')
const computerScore = document.querySelector('.computer-score')

let playerPoint = 0;
let computerPoint = 0;

function playRound(player, computer) {
  rock.addEventListener('click', () => {
  let player = 'rock';
  computer = choice();
  if(computer == 'paper' && player == 'rock') {
    computerPoint++;
    computerScore.textContent = computerPoint;
    result.textContent = 'paper beats rock'
  }else if(computer == 'scissors' && player == 'rock') {
    playerPoint++;
    playerScore.textContent = playerPoint;
    result.textContent = 'rock beats scissors'
  }else if(computer == 'rock' && player == 'rock') {
    result.textContent = 'I\'ts a tie';
  }
  
  playerGame.innerHTML +='<br>' + '<br> '+ player;
  computerGame.innerHTML +='<br>' + '<br> '+ computer;
  })

paper.addEventListener('click', () => {
  player = 'paper'
  computer = choice();
  if(computer == 'scissors' && player == 'paper') {
    computerPoint++;
    computerScore.textContent = computerPoint;
    result.textContent = 'scissors beats paper';
  }else if(computer == 'rock' && player == 'paper'){
    playerPoint++;
    playerScore.textContent = playerPoint;
    result.textContent = 'paper beats rock';
  }else if(computer == 'paper' && player == 'paper') {
    result.textContent = 'I\'ts a tie';
  }

  playerGame.innerHTML += '<br>' + '<br>'+ player;
  computerGame.innerHTML += '<br>' + '<br>'+ computer;
})


scissors.addEventListener('click', () => {
  let player = 'scissors';
  computer = choice();
  if(computer == 'paper' && player == 'scissors') {
    playerPoint++;
    playerScore.textContent = playerPoint;
    result.textContent = 'scissors beats paper';
  }else if(computer == 'rock' && player == 'scissors') {
    computerPoint++;
    computerScore.textContent = computerPoint;
    result.textContent = 'rock beats scissors';
  }else if(computer == 'scissors' && player == 'scissors') {
    result.textContent = 'I\'ts a tie';
  }
  
  playerGame.innerHTML += '<br>' + '<br>'+ player;
  computerGame.innerHTML += '<br>' + '<br>'+ computer;
})
}
playRound()




const buttons = document.querySelectorAll('button'); 
  buttons.forEach((button) => {
  button.addEventListener('click', () => {
    playRound()
    for(let i = 0; i < 5; i++) {
      if(playerPoint >= 5 && computerPoint < 5) {
        result.textContent = "Player Won";
      }else if(playerPoint < 5 && computerPoint >= 5) {
        result.textContent = "Computer Won";
      }
    }
  });
});
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
button {
  padding: 1em;
}

#result {
  text-align: center;
  margin: 2em 0;
}

.container {
  display: flex; 
}

p {
  margin: 1em;
}

.score-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Rock,Paper,Scissors</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div>
    <div id="object container">
    <button id="rock">Rock</button>
    <button id="scissors">paper</button>
    <button id="paper">scissors</button>
  </div>

    <!--result-->
    <div id="result">--</div>

    <!--counter board-->
    <div class="score-board">
      <p class="player-score">0</p>
      <p>:</p>
      <p class="computer-score">0</p>
    </div>

    <!--player game played-->
  <div class="container">
    <div>
      <p>player</p>
      <p class="player--game"></p>
    </div>

    <!--computer game played-->
    <div>
      <p>computer</p>
      <p class="computer--game"></p>
    </div>
  </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

for-loop javascript
2 Answers

A couple of changes I made to your code.

  1. I renamed array to options and filled it with objects instead, ex. {selected: 'rock', beatenBy: 'paper'}
  2. I added a data*-attribute to each button. The values are "0" for #rocks, "1" for #paper and "2" for #scissors.
  3. The event listeners on the buttons are now just extracting the data-value (0, 1, 2) from the buttons.
  4. I removed the event listeners in playRound().
  5. I removed redundant code in playRound();
  6. I changed the computer's random choice to just return a number.
  7. I use the numbers to do a lookup in options.
  8. I also showed two new ways of declaring strings.
  9. I added checkWinningCondition(). You don't need to send in the global variables playerPoint, computerPoint, and WINNING_SCORE as parameters but it's easier to understand the call to the method if you do that.
  10. I added an alert if someone won. It's up to you how it should be handled.

const options = [  // 1
  {selected: 'rock', beatenBy: 'paper'},
  {selected: 'paper', beatenBy: 'scissors'},
  {selected: 'scissors', beatenBy: 'rock'}
];

const result = textContent = document.querySelector('#result')
const playerScore = document.querySelector('.player-score')
const computerScore = document.querySelector('.computer-score')

function choice() {  // 6
  return Math.floor(Math.random() * options.length);
}

let playerPoint = 0;
let computerPoint = 0;
const WINNING_SCORE = 5;

function playRound(player) {
  let computer = choice();
  let playerOption = options[player];     // 7
  let computerOption = options[computer]; // 7
  let textContent = "It's a tie";         // 8

  // 4 & 5
  if (playerOption.beatenBy == computerOption.selected) {  // 1
    computerPoint++;
    computerScore.textContent = computerPoint;
    textContent = `${computerOption.selected} beats ${playerOption.selected}`; // 8
  } else if (computerOption.beatenBy == playerOption.selected) {  // 1
    playerPoint++;
    playerScore.textContent = playerPoint;
    textContent = `${playerOption.selected} beats ${computerOption.selected}`; // 8
  }
  
  //console.log({playerOption}, {computerOption});
  result.textContent = textContent;
  
  if (checkWinningCondition(playerPoint, computerPoint, WINNING_SCORE)) {
    alert("someone won"); // 10
  }
}

function checkWinningCondition(playerPoint, computerPoint, WINNING_SCORE) {  // 9
  return playerPoint >= WINNING_SCORE || computerPoint >= WINNING_SCORE;
}

const buttons = document.querySelectorAll('button'); 
buttons.forEach((button) => {
  button.addEventListener('click', (event) => {
    let button = event.target;
    let noWinner = !checkWinningCondition(playerPoint, computerPoint, WINNING_SCORE);   // 9, do note the ! which turns "false" to "true" and vice versa
    
    if (noWinner) { // 9
      playRound(button.dataset.value); // 3
    }
  })
})
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
button {
  padding: 1em;
}

#result {
  text-align: center;
  margin: 2em 0;
}

.container {
  display: flex; 
}

p {
  margin: 1em;
}

.score-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
<body>
  <div>
    <!-- 2 -->
    <div id="object container">
    <button id="rock" data-value="0">Rock</button>
    <button id="scissors" data-value="1">paper</button>
    <button id="paper" data-value="2">scissors</button>
  </div>

    <!--result-->
    <div id="result">--</div>

    <!--counter board-->
    <div class="score-board">
      <p class="player-score">0</p>
      <p>:</p>
      <p class="computer-score">0</p>
    </div>

    <!--player game played-->
  <div class="container">
    <div>
      <p>player</p>
      <p class="player--game"></p>
    </div>

    <!--computer game played-->
    <div>
      <p>computer</p>
      <p class="computer--game"></p>
    </div>
  </div>
  </div>
</body>

user_55266240 

const options = [  // 1
  {selected: 'rock', beatenBy: 'paper'},
  {selected: 'paper', beatenBy: 'scissors'},
  {selected: 'scissors', beatenBy: 'rock'}
];

const result = textContent = document.querySelector('#result')
const playerScore = document.querySelector('.player-score')
const computerScore = document.querySelector('.computer-score')

function choice() {  // 6
  return Math.floor(Math.random() * options.length);
}

let playerPoint = 0;
let computerPoint = 0;
const WINNING_SCORE = 5;

function playRound(player) {
  let computer = choice();
  let playerOption = options[player];     // 7
  let computerOption = options[computer]; // 7
  let textContent = "It's a tie";         // 8

  // 4 & 5
  if (playerOption.beatenBy == computerOption.selected) {  // 1
    computerPoint++;
    computerScore.textContent = computerPoint;
    textContent = `${computerOption.selected} beats ${playerOption.selected}`; // 8
  } else if (computerOption.beatenBy == playerOption.selected) {  // 1
    playerPoint++;
    playerScore.textContent = playerPoint;
    textContent = `${playerOption.selected} beats ${computerOption.selected}`; // 8
  }
  
  //console.log({playerOption}, {computerOption});
  result.textContent = textContent;
  
if (checkWinningCondition(playerPoint, computerPoint, WINNING_SCORE)) {

  // What I came up with
  if(playerPoint < WINNING_SCORE) {
    alert('computer won')
  }else if(computerPoint < WINNING_SCORE) {
    alert('player won')
  }
}
//End
}

function checkWinningCondition(playerPoint, computerPoint, WINNING_SCORE) {  // 9
  return playerPoint >= WINNING_SCORE || computerPoint >= WINNING_SCORE;
}

const buttons = document.querySelectorAll('button'); 
buttons.forEach((button) => {
  button.addEventListener('click', (event) => {
    let button = event.target;
    let noWinner = !checkWinningCondition(playerPoint, computerPoint, WINNING_SCORE);   // 9, do note the ! which turns "false" to "true" and vice versa
    
    if (noWinner) { // 9
      playRound(button.dataset.value); // 3
    }
  })
})
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
button {
  padding: 1em;
}

#result {
  text-align: center;
  margin: 2em 0;
}

.container {
  display: flex; 
}

p {
  margin: 1em;
}

.score-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>



<body>
  <div>
    <!-- 2 -->
    <div id="object container">
    <button id="rock" data-value="0">Rock</button>
    <button id="scissors" data-value="1">paper</button>
    <button id="paper" data-value="2">scissors</button>
  </div>

    <!--result-->
    <div id="result">--</div>

    <!--counter board-->
    <div class="score-board">
      <p class="player-score">0</p>
      <p>:</p>
      <p class="computer-score">0</p>
    </div>

    <!--player game played-->
  <div class="container">
    <div>
      <p>player</p>
      <p class="player--game"></p>
    </div>

    <!--computer game played-->
    <div>
      <p>computer</p>
      <p class="computer--game"></p>
    </div>
  </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

user_189902560
Related