How to keep updating random computer choice in my code without refreshing

newDev 0
Viewed 33

How to keep updating random computer choice in my code without refreshing****

Im kinda new to this and i would just like to know how to change the value of the random choice in my code 'cause it just stay the same like when i click the button multiple time the value of the random choice doesnt change

const pointH = document.getElementById('human');
const pointC = document.getElementById('comp');
const win = document.getElementById('winner');
const array = ['paper', 'rock', 'scissor']; 
const result = randomChoice(array);
let playerChoice;
let compChoice;
let playerScore = 0;
let compScore = 0;
function randomChoice(arr) {
    const randomIndex = Math.floor(Math.random() * arr.length);
    const item = arr[randomIndex];
    return item;
  }
   
  function playGame(playerChoice, compChoice){
    if (playerChoice === 'rock' && compChoice === 'paper'){
        compScore++;
        pointC.textContent = `Comp: ${compScore}`;
        win.textContent = 'You lost!';
    }
    else if(playerChoice === 'rock' && compChoice === 'scissor'){
        playerScore++;
        pointH.textContent = `Player: ${playerScore}`;
      win.textContent = 'You won!';
    }
    else if(playerChoice === 'paper' && compChoice === 'rock'){
        playerScore++;
        pointH.textContent = `Player: ${playerScore}`;
        win.textContent = 'You won!';
    }
    else if(playerChoice === 'paper' && compChoice === 'scissor'){
        compScore++;
        pointC.textContent = `Comp: ${compScore}`;
        win.textContent = 'You lost!';
    }
    else if (playerChoice === 'scissor' && compChoice === 'paper'){
        playerScore++;
        pointH.textContent = `Player: ${playerScore}`;
      win.textContent = 'You won!';
    }
    else if (playerChoice === 'scissor' && compChoice === 'rock'){
        compScore++;
        pointC.textContent = `Comp: ${compScore}`;
        win.textContent = 'You lost!';
    }
    else {
        return win.textContent = 'Its a tie'
    }
    return gameOver();
  }


 function gameOver(){
    if(playerScore === 5 || compScore === 5){
        document.getElementById('btn1').disabled = true;
        document.getElementById('btn2').disabled = true;
        document.getElementById('btn3').disabled = true;
       if (playerScore > compScore){
        alert('Game over! You won!');
       }
       else{
        alert('Game over! You lost!');
       }
    }
 }

  
  



<!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">
    <title>Rock - Paper - Scissor</title>
</head>
<body>
     
     <div class="container">
        <button id="btn1"  onclick="playGame('rock', result)">Rock</button>
        <button id="btn2"  onclick="playGame('paper', result)">Paper</button>
        <button id="btn3"  onclick="playGame('scissor', result)">Scissor</button>
     </div>
     <div class="points">
        <p id="human">Player: 0</p>
        <p id="comp">Comp: 0</p>
     </div>
     <p id="winner"></p>
     
     <script src="janken.js"></script>
</body>
</html>
javascript
2 Answers

You define computer choice like const --- only once when code is loaded

const pointH = document.getElementById('human');
const pointC = document.getElementById('comp');
const win = document.getElementById('winner');
const array = ['paper', 'rock', 'scissor']; 
let playerChoice;
let compChoice;
let playerScore = 0;
let compScore = 0;

function randomChoice(arr) {
   const randomIndex = Math.floor(Math.random() * arr.length);
   const item = arr[randomIndex];
   return item;
}

function playGame(playerChoice){
   const compChoice = randomChoice(array)
   if (playerChoice === 'rock' && compChoice === 'paper'){
      compScore++;
      pointC.textContent = `Comp: ${compScore}`;
      win.textContent = 'You lost!';
   }
   ... cleared
}

CLEARED

 <div class="container">
    <button id="btn1"  onclick="playGame('rock')">Rock</button>
    <button id="btn2"  onclick="playGame('paper')">Paper</button>
    <button id="btn3"  onclick="playGame('scissor')">Scissor</button>
 </div>

CLEARED

Radek Hermann0

A quick way to have that is by changing a little bit the playGame function. The changes are, no longer expect the COM choice as a parameter but instead pick a choice for the COM on the playGame function itself so that each time a button gets clicked you get a new random choice for the COM.

Here's a live demo (the changes are commented so that you can find them easily):

/** "result" no longer needed as a global variable as the "playGame" will calculate it on each game round */
const pointH = document.getElementById('human');
const pointC = document.getElementById('comp');
const win = document.getElementById('winner');
const array = ['paper', 'rock', 'scissor'];
let playerChoice;
let compChoice;
let playerScore = 0;
let compScore = 0;

function randomChoice(arr) {
  const randomIndex = Math.floor(Math.random() * arr.length);
  const item = arr[randomIndex];
  return item;
}

/** the "playGame" only need 1 parameter, the user's choice */
function playGame(playerChoice) {
  /** here we calculate the COM choice so that each time a button gets clicked we get another choice for the COM */
  const compChoice = randomChoice(array);
  if (playerChoice === 'rock' && compChoice === 'paper') {
    compScore++;
    pointC.textContent = `Comp: ${compScore}`;
    win.textContent = 'You lost!';
  } else if (playerChoice === 'rock' && compChoice === 'scissor') {
    playerScore++;
    pointH.textContent = `Player: ${playerScore}`;
    win.textContent = 'You won!';
  } else if (playerChoice === 'paper' && compChoice === 'rock') {
    playerScore++;
    pointH.textContent = `Player: ${playerScore}`;
    win.textContent = 'You won!';
  } else if (playerChoice === 'paper' && compChoice === 'scissor') {
    compScore++;
    pointC.textContent = `Comp: ${compScore}`;
    win.textContent = 'You lost!';
  } else if (playerChoice === 'scissor' && compChoice === 'paper') {
    playerScore++;
    pointH.textContent = `Player: ${playerScore}`;
    win.textContent = 'You won!';
  } else if (playerChoice === 'scissor' && compChoice === 'rock') {
    compScore++;
    pointC.textContent = `Comp: ${compScore}`;
    win.textContent = 'You lost!';
  } else {
    return win.textContent = 'Its a tie'
  }
  return gameOver();
}


function gameOver() {
  if (playerScore === 5 || compScore === 5) {
    document.getElementById('btn1').disabled = true;
    document.getElementById('btn2').disabled = true;
    document.getElementById('btn3').disabled = true;
    /** not necessary but "alert" is not user friendly here on SO so console.log is used instead */
    if (playerScore > compScore) {
      console.log('Game over! You won!');
    } else {
      console.log('Game over! You lost!');
    }
  }
}
<div class="container">
  <!-- the "playGame" function no longer expects the COM choice but instead it calculates it by itself thus we only send the choice that the button will make for the user like "playGame('paper')" -->
  <button id="btn1" onclick="playGame('rock')">Rock</button>
  <button id="btn2" onclick="playGame('paper')">Paper</button>
  <button id="btn3" onclick="playGame('scissor')">Scissor</button>
</div>
<div class="points">
  <p id="human">Player: 0</p>
  <p id="comp">Comp: 0</p>
</div>
<p id="winner"></p>

Just a quick note, it's possible rather common that the COM will get the same choice for multiple times in a row (at least 2 times) and that's because the COM's choice is based on a random index of the choices array which can be repeated (which is normal and expected by the way).

The above demo can still be improved (which is rather obvious) which my answer was not focused on that. I only wanted to quickly answer/fix the OP's issue without moving away from the subject.

ths0
Related