CODEWITHSUNDEEP
javascriptarraysfunctionobjectbutton
Tuesday
Tuesday

Reputation: 23

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

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>

Upvotes: 2

Views: 75

Answers (1)

ruleboy21
ruleboy21

Reputation: 6353

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>

Upvotes: 1

Related Questions