I'm very new to Javascript and I'm having problems with my first game Rock Paper Scissors and it is a very simple thing I would like to do, at least in theory...
When you click on the ROCK button, player's choice is obviously ROCK and then it compares to random result from a computer's choice (rock, paper or scissors) - this works.
BUT when you click on PAPER or SCISSORS button it's the same thing happening, it's ROCK again. So my problem is I have no idea how to tell my code that I as a player am choosing PAPER button (or SCISSORS button) and only then compare my choice with the computer's choice (either rock, paper or scissors).
Here is my github code. Any help much appreciated!
https://michalthebear.github.io/rock-paper-scissors/
EDIT: Added code, thx!
HTML
<div id="container">
<div id="gameField">
<h1>ROCK PAPER SCISSORS</h1>
<h2>GET A COMFY CHAIR, RELAX<br>AND DESTROY THE COMPUTER</h2>
<h3>Score 5 to win the game!</h3>
<button onclick="startGame()" id="buttonRock" class="buttons">Rock</button>
<button onclick="startGame()" id="buttonPaper" class="buttons">Paper</button>
<button onclick="startGame()" id="buttonScissors" class="buttons">Scissors</button>
<button onclick="resetButton()" id="buttonReset" class="buttons">Reset</button>
<div id="resultBox"></div>
<p>Player Score:
<a id="playerClicks">0</a>
</p>
<p>Computer Score:
<a id="computerClicks">0</a>
</p><br>
<p id="winnerIs">And the winner is:<br>
<a id="whoWon"></a>
</p>
</div>
</div>
JAVASCRIPT
let playerScore = 0;
let computerScore = 0;
let playerWon = "Player";
let computerWon = "Computer";
document.getElementById("winnerIs").style.display = "none";
function startGame() {
document.getElementById("resultBox").innerHTML = playRound();
}
function computerPlay() {
let computerChoice = ["rock", "paper", "scissors"]
return computerChoice[Math.floor(Math.random() * computerChoice.length)];
}
function playRound(playerSelection, computerSelection) {
let roundResult = "";
let computerChoice = computerPlay();
const buttonRock = document.querySelector('#buttonRock');
const buttonPaper = document.querySelector('#buttonPaper');
const buttonScissors = document.querySelector('#buttonScissors');
let playerChoiceRock = buttonRock;
let playerChoicePaper = buttonPaper;
let playerChoiceScissors = buttonScissors;
if (playerChoiceRock && computerChoice === "paper") {
roundResult = "You've chosen ROCK and your enemy PAPER so you lose because PAPER beats ROCK";
computerScore++;
console.log("You've chosen ROCK and your enemy PAPER so you lose because PAPER beats ROCK");
} else if (playerChoiceRock && computerChoice === "scissors") {
roundResult = "You've chosen ROCK and your enemy SCISSORS so you win because ROCK beats SCISSORS";
playerScore++;
console.log("You've chosen ROCK and your enemy SCISSORS so you win because ROCK beats SCISSORS");
} else if (playerChoiceRock && computerChoice === "rock") {
roundResult = "You've chosen ROCK and your enemy ROCK so it's a tie!";
console.log("You've chosen ROCK and your enemy ROCK so it's a tie!");
} else if (playerChoicePaper && computerChoice === "rock") {
roundResult = "You've chosen PAPER and your enemy ROCK so you win because PAPER beats ROCK";
console.log("You've chosen PAPER and your enemy ROCK so you win because PAPER beats ROCK");
} else if (playerChoicePaper && computerChoice === "paper") {
roundResult = "You've chosen PAPER and your enemy PAPER so it's a tie!";
console.log("You've chosen PAPER and your enemy PAPER so it's a tie!");
} else if (playerChoicePaper && computerChoice === "scissors") {
roundResult = "You've chosen PAPER and your enemy SCISSORS so you lose because SCISSORS beats PAPER";
console.log("You've chosen PAPER and your enemy SCISSORS so you lose because SCISSORS beats PAPER");
} else if (playerChoiceScissors && computerChoice === "rock") {
roundResult = "You've chosen SCISSORS and your enemy ROCK so you lose because ROCK beats SCISSORS";
console.log("You've chosen SCISSORS and your enemy ROCK so you lose because ROCK beats SCISSORS");
} else if (playerChoiceScissors && computerChoice === "paper") {
roundResult = "You've chosen SCISSORS and your enemy PAPER so you win because SCISSORS beats PAPER";
console.log("You've chosen SCISSORS and your enemy PAPER so you win because SCISSORS beats PAPER");
} else if (playerChoiceScissors && computerChoice === "scissors") {
roundResult = "You've chosen SCISSORS and your enemy SCISSORS so it's a tie!";
console.log("You've chosen SCISSORS and your enemy SCISSORS so it's a tie!");
}
document.getElementById("playerClicks").innerHTML = playerScore;
document.getElementById("computerClicks").innerHTML = computerScore;
return roundResult;
}
function resetButton() {
playerScore = 0;
computerScore = 0;
document.getElementById("resultBox").innerHTML = "";
document.getElementById("winnerIs").style.display = "none";
document.getElementById("playerClicks").innerHTML = playerScore;
document.getElementById("computerClicks").innerHTML = computerScore;
// document.getElementById("confetti-canvas").style.display = "none";
}