How do I go about updating a property when the button element is clicked?

user_14974326 0
Viewed 94

I am have a issue here, I am trying to create this Rock, Paper, Scissors game and am having trouble with button choices for the user to pick. I am having no luck with getting the code to update the playerTurn.currentPick property to update what the player chose on the button click. I create a function called choiceBtn which is suppose to update the property with what the user chooses. I am a newbie in coding as you can tell but any help would be appreciated. Below is my JS code and I will attached the HTML code as well if it would help.

let playerTurn = {
  currentPick: null
  
};
let cpuTurn = {
  currentPick: null
};


const playerChoice = ["Lapis", "Papyrus", "Scalpellus"];
playerTurn.currentPick = choiceBtn();

function computerChoice() {
  const randomChoice = Math.floor(Math.random() * playerChoice.length);
cpuTurn.currentPick = playerChoice[randomChoice];

return cpuTurn.currentPick;
                       }
console.log(computerChoice());

function compareChoices(){
  computerChoice();
  if(playerTurn.currentPick === cpuTurn.currentPick){
    resultScreen("It's a tie. Both the player and cpu chose " + playerTurn.currentPick);
  
} else if(playerTurn.currentPick === playerChoice[0]){
} if(cpuTurn.currentPick === playerChoice[2]){
  resultScreen("The player wins. The player chose " + playerTurn.currentPick + " and the cpu chose " + cpuTurn.currentPick + ".");
} else if(playerTurn.currentPick === playerChoice[1]){
  if(cpuTurn.currentPick === playerChoice[0]){
    resultScreen("The player wins. The player chose " + playerTurn.currentPick + " and the cpu chose " + cpuTurn.currentPick + ".");
  }
} else if(playerTurn.currentPick === playerChoice[2]){
  if(cpuTurn.currentPick === playerChoice[1]){
    resultScreen("The player wins. The player chose " + playerTurn.currentPick + " and the cpu chose " + cpuTurn.currentPick + ".");
  }
} else if(cpuTurn.currentPick === playerChoice[0]){
  if(playerTurn.currentPick === playerChoice[2]){
    resultScreen("The cpu wins. The player chose " + playerTurn.currentPick + " and the cpu chose " + cpuTurn.currentPick + ".");
  }
}
  else if(cpuTurn.currentPick === playerChoice[1]){
    if(playerTurn.currentPick === playerChoice[0]){
      resultScreen("The cpu wins. The player chose " + playerTurn.currentPick + " and the cpu chose " + cpuTurn.currentPick + ".");
    }
  }
  else if(cpuTurn.currentPick === playerChoice[2]){
    if(playerTurn.currentPick === playerChoice[1]){
       resultScreen("The cpu wins. The player chose " + playerTurn.currentPick + " and the cpu chose " + cpuTurn.currentPick + ".");
    }
  }
  
}
function resultScreen(display){
  const displayText = document.createElement('p');
  displayText.innerText = display;
  document.body.appendChild(displayText);
}
function choiceBtn(){
 var lapisBtn = document.getElementById("lapis").onclick = function(){
  playerTurn.currentPick = playerChoice[0];
 }
  var papyrusBtn =  document.getElementById("papyrus").onclick = function(){
   papyrusBtn = playerChoice[1];
 }
  var scalpellusBtn = document.getElementById("scalpellus").onclick = function(){
   scalpellusBtn = playerChoice[2];
 }
}
compareChoices();

<!--HTML CODE-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lapis, Papyrus, Scalpelus</title>
</head>
<body>
  Welcome to the game of Lapis, Papyrus, and Scalpelus!
  <h2>Make your Choice Below</h2>
  <button id="lapis">Lapis</button>
  <button id="papyrus">Papyrus</button>
  <button id="scalpellus">Scalpellus</button>
</body>
</html>
css html javascript
2 Answers

You were on the right track. There were just a couple of issues around defining your on click events. I removed these from the function they were in so that they could be defined at the start of the run. There was also an issue with moving the player choice to the current pick variable. Your paper and scissors were being moved to the variable name.

The snippet shows the onClick events working, but there does appear to be further work needed in checking the results of the game. It's not always correct about who wins

let playerTurn = {
  currentPick: null

};
let cpuTurn = {
  currentPick: null
};


const playerChoice = ["Lapis", "Papyrus", "Scalpellus"];
// playerTurn.currentPick = choiceBtn();

function computerChoice() {
  const randomChoice = Math.floor(Math.random() * playerChoice.length);
  cpuTurn.currentPick = playerChoice[randomChoice];

  return cpuTurn.currentPick;
}
console.log(computerChoice());

function compareChoices() {
  computerChoice();
  if (playerTurn.currentPick === cpuTurn.currentPick) {
    resultScreen("It's a tie. Both the player and cpu chose " + playerTurn.currentPick);

  } else if (playerTurn.currentPick === playerChoice[0]) {}
  if (cpuTurn.currentPick === playerChoice[2]) {
    resultScreen("The player wins. The player chose " + playerTurn.currentPick + " and the cpu chose " + cpuTurn.currentPick + ".");
  } else if (playerTurn.currentPick === playerChoice[1]) {
    if (cpuTurn.currentPick === playerChoice[0]) {
      resultScreen("The player wins. The player chose " + playerTurn.currentPick + " and the cpu chose " + cpuTurn.currentPick + ".");
    }
  } else if (playerTurn.currentPick === playerChoice[2]) {
    if (cpuTurn.currentPick === playerChoice[1]) {
      resultScreen("The player wins. The player chose " + playerTurn.currentPick + " and the cpu chose " + cpuTurn.currentPick + ".");
    }
  } else if (cpuTurn.currentPick === playerChoice[0]) {
    if (playerTurn.currentPick === playerChoice[2]) {
      resultScreen("The cpu wins. The player chose " + playerTurn.currentPick + " and the cpu chose " + cpuTurn.currentPick + ".");
    }
  } else if (cpuTurn.currentPick === playerChoice[1]) {
    if (playerTurn.currentPick === playerChoice[0]) {
      resultScreen("The cpu wins. The player chose " + playerTurn.currentPick + " and the cpu chose " + cpuTurn.currentPick + ".");
    }
  } else if (cpuTurn.currentPick === playerChoice[2]) {
    if (playerTurn.currentPick === playerChoice[1]) {
      resultScreen("The cpu wins. The player chose " + playerTurn.currentPick + " and the cpu chose " + cpuTurn.currentPick + ".");
    }
  }

}

function resultScreen(display) {
  const displayText = document.createElement('p');
  displayText.innerText = display;
  document.body.appendChild(displayText);
}

var lapisBtn = document.getElementById("lapis").onclick = function() {
  playerTurn.currentPick = playerChoice[0];
  compareChoices();
}
var papyrusBtn = document.getElementById("papyrus").onclick = function() {
  playerTurn.currentPick = playerChoice[1];
  compareChoices();
}
var scalpellusBtn = document.getElementById("scalpellus").onclick = function() {
  playerTurn.currentPick = playerChoice[2];
  compareChoices();
}
Welcome to the game of Lapis, Papyrus, and Scalpelus!
<h2>Make your Choice Below</h2>
<button id="lapis">Lapis</button>
<button id="papyrus">Papyrus</button>
<button id="scalpellus">Scalpellus</button>

user_86595980

There is a lot of duplicate code there, let's reduce that. Event listeners can be assigned in a loop and variables can be used to hold the info we need until we are ready to display the result. We will also use a template literal for string construction

/*Get the buttons*/
let gameButtons = document.querySelectorAll("#game button");

/*Assign the event lister*/
for (i = 0; i < gameButtons.length; i++) {
  gameButtons[i].addEventListener("click", play);
}


/*Event listener funct*/
function play() {
  /*Array of choices*/
  const choices = ["Lapis", "Papyrus", "Scalpellus"];
  /*Player Choice comes from id. "this" is the button pressed*/
  let playerChoice = this.id;
  /*Random computer choice from array*/
  let computerChoice = choices[Math.floor(Math.random() * choices.length)];
  /*Default condition is a tie, using a template literal for string construction*/
  let result = `It's a tie. Both the player and cpu chose ${playerChoice}`;
  let playerWin;
  /*
  console.log(this.id)
  console.log(computerChoice)
  */

  /*If we don't have a tie*/
  if (playerChoice !== computerChoice) {
    /*Switch based on player choice then determine winner*/
    switch (playerChoice) {
      case "Lapis":
        playerWin = computerChoice == "Scalpellus";
        break;
      case "Papyrus":
        playerWin = computerChoice == "Lapis";
        break;
      case "Scalpellus":
        playerWin = computerChoice == "Papyrus";
        break;
    }

    /*Set winner text*/
    let winner = playerWin ? "player" : "cpu";

    /*Set result text: again using a template literal*/
    result = `The ${winner} wins. The player chose ${playerChoice} and the cpu chose ${computerChoice}`;    
  }
  /*Display result text*/
  document.getElementById("result").innerHTML = result;
}
Welcome to the game of Lapis, Papyrus, and Scalpelus!
<h2>Make your Choice Below</h2>
<div id="game">
  <button id="Lapis">Lapis</button>
  <button id="Papyrus">Papyrus</button>
  <button id="Scalpellus">Scalpellus</button>
  <div id="result"></div>
</div>

user_46650
Related