rock paper scissors, player choice always returns null (js) [closed]

javascript

As title says I'm unsure as to why it's always returning null as the player's choice before I can even click a button to give an input. Any and all advice appreciated. I've tried a few different ways of grabbing the user input so it might be something left over from the multiple iterations I had of it.

//keeping track of both player and computers inputs, starting off as null
const player = {
  currentChoice: null
};
const computer = {
  currentChoice: null
};

//the three possible options for both parties to choose from
const choices = ["Lapis", "Papyrus", "Scalpellus"];

//grabbing the user's input of the buttons and applying the relevant function to update player's choice
document.querySelector('#Lapis').onclick = setLapis
document.querySelector('#Papyrus').onclick = setPapyrus
document.querySelector('#Scalpellus').onclick = setScalpellus;

//funtions to update the choice and print to console
function setLapis(){
  player.currentChoice = choices[0];
  console.log(player.currentChoice);
}
function setPapyrus(){
  player.currentChoice = choices[1];
  console.log(player.currentChoice);
}
function setScalpellus(){
  player.currentChoice = choices[2];
  console.log(player.currentChoice);
}

//randomising computers's choice
function computerChooses() {
  const randomIndex = Math.floor(Math.random() * choices.length);
  computer.currentChoice = choices[randomIndex];
}

//logic for whether computer or player wins
function compareChoices(){
  computerChooses();
  if(computer.currentChoice === player.currentChoice){
    displayResult("It's a tie! The computer and player both chose " + computer.currentChoice);
  }else if(computer.currentChoice === choices[0]){
    if(player.currentChoice === choices[1]){
      displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }else{
      displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }
  }else if(computer.currentChoice === choices[1]){
    if(player.currentChoice === choices[2]){
      displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }else{
     displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }
  }else if(computer.currentChoice === choices[2]){
    if(player.currentChoice === choices[0]){
      displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }else{
      displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }
  }
}

//displaying the result of the match
function displayResult(result){
  const resultText = document.createElement('p');
  resultText.innerText = result;
  document.body.appendChild(resultText);

}

compareChoices();

<body>
  <h1>Welcome to the game of Lapis, Papyrus, Scalpellus!</h1>
 
<button id="Lapis">Lapis</button>
<button id="Papyrus">Papyrus</button>
<button id="Scalpellus">Scalpellus</button>
  
  <h2>The results are in...</h2>



</body>

//keeping track of both player and computers inputs, starting off as null
const player = {
  currentChoice: null
};
const computer = {
  currentChoice: null
};

//the three possible options for both parties to choose from
const choices = ["Lapis", "Papyrus", "Scalpellus"];

//grabbing the user's input of the buttons and applying the relevant function to update player's choice
document.querySelector('#Lapis').onclick = setLapis
document.querySelector('#Papyrus').onclick = setPapyrus
document.querySelector('#Scalpellus').onclick = setScalpellus;

//funtions to update the choice and print to console
function setLapis(){
  player.currentChoice = choices[0];
  console.log(player.currentChoice);
  compareChoices();
}
function setPapyrus(){
  player.currentChoice = choices[1];
  console.log(player.currentChoice);
  compareChoices();
}
function setScalpellus(){
  player.currentChoice = choices[2];
  console.log(player.currentChoice);
  compareChoices();
}

//randomising computers's choice
function computerChooses() {
  const randomIndex = Math.floor(Math.random() * choices.length);
  computer.currentChoice = choices[randomIndex];
}

//logic for whether computer or player wins
function compareChoices(){
  computerChooses();
  if(computer.currentChoice === player.currentChoice){
    displayResult("It's a tie! The computer and player both chose " + computer.currentChoice);
  }else if(computer.currentChoice === choices[0]){
    if(player.currentChoice === choices[1]){
      displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }else{
      displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }
  }else if(computer.currentChoice === choices[1]){
    if(player.currentChoice === choices[2]){
      displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }else{
     displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }
  }else if(computer.currentChoice === choices[2]){
    if(player.currentChoice === choices[0]){
      displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }else{
      displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }
  }
}

//displaying the result of the match
function displayResult(result){
  const resultText = document.createElement('p');
  resultText.innerText = result;
  document.body.appendChild(resultText);

}

<body>
  <h1>Welcome to the game of Lapis, Papyrus, Scalpellus!</h1>
 
<button id="Lapis">Lapis</button>
<button id="Papyrus">Papyrus</button>
<button id="Scalpellus">Scalpellus</button>
  
  <h2>The results are in...</h2>



</body>

I believe this will fix what you are trying to fix.

I Removed the function for "compareChoices" because it was causing it to instantly choose the winner, without the player getting to choose any options, and added "compareChoices" to the inside of the functions for setting your choice.

rock paper scissors, player choice always returns null (js) [closed]

Related

Recent Posts