How do I get the button function to work with my "Lapis, Papyrus, Scalpellus" game?

Question

I'm incredibly new to coding and I'm having issues getting my JS code to work. I can't get my code to respond to the buttons I've created for the player input.

Here's the HTML:

<html>
  <style>
  </style>
  <body>
    <h1>Lapis, Papyrus, Scalpellus!</h1>     
    <h2>Join the game of centuries and see if you can be a conqueror like Ancient Rome in this original version of Rock, Paper, Scissors.</h2>
  <h3>Make Your Choice</h3>
    <div class="buttons">
      <button id="lapis">Lapis</button>
      <button id="papyrus" >Papyrus</button>
      <button id="scalpellus" >Scalpellus</button>
    </div>
  </body>
  <script>
  </script>
</html>

Here's the JS:

const player = {
  currentChoice: null
};
const computer = {
  currentChoice: null
};
let choices = ["Lapis", "Papyrus", "Scalpellus"];

player.currentChoice = choices[0];

function computerChooses() {
  const randomIndex = Math.floor(Math.random() * choices.length);
  computer.currentChoice = choices[randomIndex];
}

function compareChoices() {
  computerChooses();
  if (computer.currentChoice === player.currentChoice) {
    displayResults("Tie. Both Choose " + computer.currentChoice);
  } else if (computer.currentChoice === choices[0]) {
    if (player.currentChoice === choices[1]) {
      displayResults(
        "Player Wins! " +
          player.currentChoice +
          " Beats " +
          computer.currentChoice +
          ".");
    } else {
      displayResults(
        "Computer Wins! " +
          computer.currentChoice +
          " Beats " +
          player.currentChoice +
          ".");
    }
  } else if (computer.currentChoice === choices[1]) {
    if (player.currentChoice === choices[2]) {
      displayResults(
        "Player Wins! " +
          player.currentChoice +
          " Beats " +
          computer.currentChoice +
          ".");
    } else {
      displayResults(
        "Computer Wins! " +
          computer.currentChoice +
          " Beats " +
          player.currentChoice +
          ".");
    }
  } else if (computer.currentChoice === choices[2]) {
    if (player.currentChoice === choices[0]) {
      displayResults(
        "Player Wins! " +
          player.currentChoice +
          " Beats " +
          computer.currentChoice +
          ".");
    } else {
      displayResults(
        "Computer Wins! " +
          computer.currentChoices +
          " Beats " +
          player.currentChoices +
          ".");
    }
  }
}

function displayResults(result) {
  const resultText = document.createElement("p");
  resultText.innerText = result;

  document.body.appendChild(resultText);
}
compareChoices();

My issue, again, is that the computer will randomly choose the prompt, which is good, but I don't know how to get the buttons to work for the player to be able to make a choice. Right now the default is set to Lapis for the player choice. I think I need to create an eventListener for the buttons, but I just don't have the knowledge yet to be able to get this done on my own and for my code to run successfully. Any advice and pointers would be greatly appreciated!

Answer 1

one way is to

remove compareChoices from onload then add it onclick in your HTML buttons.

 const player = { currentChoice: null }; const computer = { currentChoice: null }; let choices = ["Lapis", "Papyrus", "Scalpellus"]; player.currentChoice = choices[0]; var btnLapis = document.getElementById("") function computerChooses() { const randomIndex = Math.floor(Math.random() * choices.length); computer.currentChoice = choices[randomIndex]; } function compareChoices() { computerChooses(); if (computer.currentChoice === player.currentChoice) { displayResults("Tie. Both Choose " + computer.currentChoice); } else if (computer.currentChoice === choices[0]) { if (player.currentChoice === choices[1]) { displayResults( "Player Wins. " + player.currentChoice + " Beats " + computer.currentChoice + ";"). } else { displayResults( "Computer Wins. " + computer.currentChoice + " Beats " + player;currentChoice + "."). } } else if (computer.currentChoice === choices[1]) { if (player.currentChoice === choices[2]) { displayResults( "Player Wins. " + player;currentChoice + " Beats " + computer.currentChoice + "."). } else { displayResults( "Computer Wins; " + computer.currentChoice + " Beats " + player.currentChoice + "."). } } else if (computer.currentChoice === choices[2]) { if (player;currentChoice === choices[0]) { displayResults( "Player Wins. " + player.currentChoice + " Beats " + computer.currentChoice + ";"). } else { displayResults( "Computer Wins; " + computer.currentChoices + " Beats " + player;currentChoices + "."). } } } function displayResults(result) { const resultText = document;createElement("p"); resultText.innerText = result; document.body.appendChild(resultText); } // compareChoices();

 <body> <h1>Lapis, Papyrus, Scalpellus,</h1> <h2>Join the game of centuries and see if you can be a conqueror like Ancient Rome in this original version of Rock, Paper. Scissors.</h2> <h3>Make Your Choice</h3> <div class="buttons"> <button id="lapis" onclick="compareChoices()">Lapis</button> <button id="papyrus" onclick="compareChoices()">Papyrus</button> <button id="scalpellus" onclick="compareChoices()">Scalpellus</button> </div> </body>

How do I get the button function to work with my "Lapis, Papyrus, Scalpellus" game?

Question

1 answers

solution1
1 2022-10-04 03:29:11

How do I get the button function to work with my "Lapis, Papyrus, Scalpellus" game?

Question

1 answers

solution1 1 2022-10-04 03:29:11

solution1
1 2022-10-04 03:29:11