Tell us what’s happening:
I’ve created an if and else if statement if either player or computer score = 3. However, my code is not passing and I can’t get my head around why this may be.
(I’ve updated to show the full code and add = after the .style.display properties but it is still not passing.)
Your code so far
…
function getRandomComputerResult() {
const options = ["Rock", "Paper", "Scissors"];
const randomIndex = Math.floor(Math.random() * options.length);
return options[randomIndex];
}
function hasPlayerWonTheRound(player, computer) {
return (
(player === "Rock" && computer === "Scissors") ||
(player === "Scissors" && computer === "Paper") ||
(player === "Paper" && computer === "Rock")
);
}
let playerScore = 0;
let computerScore = 0;
function getRoundResults(userOption) {
const computerResult = getRandomComputerResult();
if (hasPlayerWonTheRound(userOption, computerResult)) {
playerScore++;
return `Player wins! ${userOption} beats ${computerResult}`;
} else if (computerResult === userOption) {
return `It's a tie! Both chose ${userOption}`;
} else {
computerScore++;
return `Computer wins! ${computerResult} beats ${userOption}`;
}
}
const playerScoreSpanElement = document.getElementById("player-score");
const computerScoreSpanElement = document.getElementById("computer-score");
const roundResultsMsg = document.getElementById("results-msg");
const winnerMsgElement = document.getElementById("winner-msg");
const optionsContainer = document.querySelector(".options-container");
const resetGameBtn = document.getElementById("reset-game-btn");
function showResults(userOption) {
roundResultsMsg.innerText = getRoundResults(userOption);
computerScoreSpanElement.innerText = computerScore;
playerScoreSpanElement.innerText = playerScore;
if(playerScore === 3){
winnerMsgElement = "Player has won the game!";
resetGameBtn.style.display = 'block';
optionsContainer.style.display = 'hide';
} else if(computerScore === 3){
winnerMsgElement = "Computer has won the game!";
resetGameBtn.style.display = 'block';
optionsContainer.style.display = 'hide';
}
};
const rockBtn = document.getElementById("rock-btn");
const paperBtn = document.getElementById("paper-btn");
const scissorsBtn = document.getElementById("scissors-btn");
rockBtn.addEventListener("click", function () {
showResults("Rock");
});
paperBtn.addEventListener("click", function () {
showResults("Paper");
});
scissorsBtn.addEventListener("click", function () {
showResults("Scissors");
});