Rock Paper Scissors selection issue-CodePudding

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" >Rock</button>
        <button onclick="startGame()" id="buttonPaper" >Paper</button>
        <button onclick="startGame()" id="buttonScissors" >Scissors</button>
        <button onclick="resetButton()" id="buttonReset" >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";
}

CodePudding user response：

Your rock, paper, and scissor buttons all call startGame on click. You must disambiguate the clicks by using this (which will equal the clicked button) or calling different functions when different buttons are clicked.

CodePudding user response：

First of all, you need to post the code here, but it's good I think that I was able to identify where the problem is. The computerPlay() method works very well but you need to have a similar function for the player as well instead of having all of the buttons selected from the document. Because of that For player's case rock paper and scissors cases are all true all the time, and when the code gets to the ifclauses on the line 28 on app.js, it will enter the if clause that matches the computer's random choice. I recommend that you make a function for player as well so that when you click the button, that is when the requested button gets selected for the player as well instead. You should maybe add an eventlistener to the three buttons for that purpose. Good luck!