Can't figure out how to make buttons change array number-CodePudding

I am probably overcomplicating this, but I cannot for the life of me figure out how to change humanChoice with the click of the buttons. I am just trying to get my rock, paper, scissors project done for my pre-work before my classes start. What am I doing wrong with this code?

let humanObject = {
  humanChoice: null
};
let computerObject = {
  computerChoice: null
};
const choices = ["Lapis", "Papyrus", "Scalpellus"];

humanObject.humanChoice = choices[0];

function computerChooses() {
  const rpsGo = Math.floor(Math.random() * choices.length);
  computerObject.computerChoice = choices[rpsGo];
}

function compareChoices() {

  computerChooses();
  if (computerObject.computerChoice === humanObject.humanChoice) {
    document.getElementById('results').innerHTML = "TIE! Both you and your opponent have chosen "   computerObject.computerChoice   "!";
  } else if (computerObject.computerChoice === choices[0]) {
    if (humanObject.humanChoice === choices[1]) {
      document.getElementById('results').innerHTML = "Congratulations! You're the winner! Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice;
    } else {
      document.getElementById('results').innerHTML = "Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice   ". You lose!";
    }
  } else if (computerObject.computerChoice === choices[1]) {
    if (humanObject.humanChoice === choices[2]) {
      document.getElementById('results').innerHTML = "Congratulations! You're the winner! Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice;
    } else {
      document.getElementById('results').innerHTML = "Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice   ". You lose!";
    }
  } else if (computerObject.computerChoice === choices[2]) {
    if (humanObject.humanChoice === choices[0]) {
      document.getElementById('results').innerHTML = "Congratulations! You're the winner! Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice;
    } else {
      document.getElementById('results').innerHTML = "Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice   ". You lose!";
    }
  }
}

document.querySelector('#L').addEventListener('click', compareChoices);
document.querySelector('#P').addEventListener('click', compareChoices);
document.querySelector('#S').addEventListener('click', compareChoices);

<h1>LAPIS, PAPYRUS, SCALPELLUS</h1>
<h2>Choose your weapon, defeat your opponent!</h2>
<button ID=L>Lapis</button>
<button ID=P>Papyrus</button>
<button ID=S>Scalpellus</button>
<p>Results:</p>
<p ID=results></p>

CodePudding user response：

Rather than hard coding the humanChoice, you can pass in the event object from the click event to the compareChoices function and then get the humanChoice using event.target.textContent.

Try this

let humanObject = {
    humanChoice: null
};
let computerObject = {
    computerChoice: null
};
const choices = ["Lapis", "Papyrus", "Scalpellus"];

// humanObject.humanChoice = choices[0];

function computerChooses() {
    const rpsGo = Math.floor(Math.random() * choices.length);
    computerObject.computerChoice = choices[rpsGo];
}

function compareChoices(event) {
    humanObject.humanChoice = event.target.textContent.trim();
    computerChooses();

    if (computerObject.computerChoice === humanObject.humanChoice) {
        document.getElementById('results').innerHTML = "TIE! Both you and your opponent have chosen "   computerObject.computerChoice   "!";
    } else if (computerObject.computerChoice === choices[0]) {
        if (humanObject.humanChoice === choices[1]) {
            document.getElementById('results').innerHTML = "Congratulations! You're the winner! Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice;
        } else {
            document.getElementById('results').innerHTML = "Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice   ". You lose!";
        }
    } else if (computerObject.computerChoice === choices[1]) {
        if (humanObject.humanChoice === choices[2]) {
            document.getElementById('results').innerHTML = "Congratulations! You're the winner! Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice;
        } else {
            document.getElementById('results').innerHTML = "Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice   ". You lose!";
        }
    } else if (computerObject.computerChoice === choices[2]) {
        if (humanObject.humanChoice === choices[0]) {
            document.getElementById('results').innerHTML = "Congratulations! You're the winner! Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice;
        } else {
            document.getElementById('results').innerHTML = "Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice   ". You lose!";
        }
    }
}

document.querySelector('#L').addEventListener('click', compareChoices);
document.querySelector('#P').addEventListener('click', compareChoices);
document.querySelector('#S').addEventListener('click', compareChoices);

<h1>LAPIS, PAPYRUS, SCALPELLUS</h1>
<h2>Choose your weapon, defeat your opponent!</h2>
<button id="L">Lapis</button>
<button id="P">Papyrus</button>
<button id="S">Scalpellus</button>
<p>Results:</p>
<p id="results"></p>

You can simplify the code by extracting the results part to its own function like so

let humanObject = {
    humanChoice: null
};
let computerObject = {
    computerChoice: null
};
const choices = ["Lapis", "Papyrus", "Scalpellus"];

// humanObject.humanChoice = choices[0];

function computerChooses() {
    const rpsGo = Math.floor(Math.random() * choices.length);
    computerObject.computerChoice = choices[rpsGo];
}

function result(choice) {
    if (humanObject.humanChoice === choice) {
        document.getElementById('results').innerHTML = "Congratulations! You're the winner! Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice;
    } else {
        document.getElementById('results').innerHTML = "Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice   ". You lose!";
    }
}

function compareChoices(event) {
    humanObject.humanChoice = event.target.textContent.trim();
    computerChooses();

    if (computerObject.computerChoice === humanObject.humanChoice) {
        document.getElementById('results').innerHTML = "TIE! Both you and your opponent have chosen "   computerObject.computerChoice   "!";
    } else if (computerObject.computerChoice === choices[0]) {
        result(choices[1]);
    } else if (computerObject.computerChoice === choices[1]) {
        result(choices[2]);
    } else if (computerObject.computerChoice === choices[2]) {
        result(choices[0]);
    }
}

document.querySelector('#L').addEventListener('click', compareChoices);
document.querySelector('#P').addEventListener('click', compareChoices);
document.querySelector('#S').addEventListener('click', compareChoices);

<h1>LAPIS, PAPYRUS, SCALPELLUS</h1>
<h2>Choose your weapon, defeat your opponent!</h2>
<button id="L">Lapis</button>
<button id="P">Papyrus</button>
<button id="S">Scalpellus</button>
<p>Results:</p>
<p id="results"></p>