Review DOM Manipulation by Building a Rock, Paper, Scissors Game - Step 5

mbas · July 21, 2024, 12:04pm

I am doing everything this challenge says but it keeps on saying it is incorrect. I am nogt sure why, please can i have some help

Your code so far


let playerScore = 0;
let computerScore = 0;
const WINNING_SCORE = 3;

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 to get a random choice for the computer
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")
    );
}

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}`;
    }
}
function showResults(userOption) {
    const resultMessage = getRoundResults(userOption);
    roundResultsMsg.innerText = resultMessage;
    playerScoreSpanElement.innerText = playerScore;
    computerScoreSpanElement.innerText = computerScore;

    if (playerScore === WINNING_SCORE) {
        winnerMsgElement.innerText = "Player has won the game!";
        winnerMsgElement.style.display = "block";
        optionsContainer.style.display = "none";
        resetGameBtn.style.display = "block";
    } else if (computerScore === WINNING_SCORE) {
        winnerMsgElement.innerText = "Computer has won the game!";
        winnerMsgElement.style.display = "block";
        optionsContainer.style.display = "none";
        resetGameBtn.style.display = "block";
    } else {
        setTimeout(() => {
            roundResultsMsg.innerText = "";
            optionsContainer.style.display = "block";
        }, 3000); // Delay to let the user see the result
    }
}
function resetGame() {
    playerScore = 0;
    computerScore = 0;
    playerScoreSpanElement.innerText = playerScore;
    computerScoreSpanElement.innerText = computerScore;
    winnerMsgElement.style.display = "none";
    resetGameBtn.style.display = "none";
    optionsContainer.style.display = "block";
    roundResultsMsg.innerText = "";
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Review DOM Manipulation by Building a Rock, Paper, Scissors Game - Step 5

pkdvalis · July 21, 2024, 12:23pm

Did you write all of this code yourself?

https://www.freecodecamp.org/news/academic-honesty-policy/

mbas · July 21, 2024, 2:38pm

yes i did why are u asking

pkdvalis · July 21, 2024, 2:40pm

I’m curious how the setTimeout section fulfills the instructions. Can you please explain it?

mbas · July 21, 2024, 2:42pm

I reset the lesson and i am going to try again

mbas · July 21, 2024, 2:51pm

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 === WINNING_SCORE) {
        winnerMsgElement.innerText = "Player has won the game!";
        winnerMsgElement.style.display = "block";
        optionsContainer.style.display = "none";
        resetGameBtn.style.display = "block";
    } else if (computerScore === WINNING_SCORE) {
        winnerMsgElement.innerText = "Computer has won the game!";
        winnerMsgElement.style.display = "block";
        optionsContainer.style.display = "none";
        resetGameBtn.style.display = "block";
  
function resetGame() {
    playerScore = 0;
    computerScore = 0;
    playerScoreSpanElement.innerText = playerScore;
    computerScoreSpanElement.innerText = computerScore;
    winnerMsgElement.style.display = "none";
    resetGameBtn.style.display = "none";
    optionsContainer.style.display = "block";
    roundResultsMsg.innerText = ""

};

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");
});

this is what it looks like now i have removed the set timeout thing but it is still not working because i have this error SyntaxError: unknown: Unexpected token (81:3)

79 | scissorsBtn.addEventListener(“click”, function () {
80 | showResults(“Scissors”);

81 | });
| ^

pkdvalis · July 21, 2024, 3:25pm

What is WINNING_SCORE? Is that a variable that you copied from someone else’s answer?

It’s not defined anywhere.

Check that you have all your matching opening and closing braces for each block of code.

mbas · July 21, 2024, 3:28pm

it is the variable name for whoever wins the game
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;
const WINNINGSCORE = 3
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 === WINNING_SCORE) {
winnerMsgElement.innerText = “Player has won the game!”;
winnerMsgElement.style.display = “block”;
optionsContainer.style.display = “none”;
resetGameBtn.style.display = “block”;
} else if (computerScore === WINNING_SCORE) {
winnerMsgElement.innerText = “Computer has won the game!”;
winnerMsgElement.style.display = “block”;
optionsContainer.style.display = “none”;
resetGameBtn.style.display = “block”;

function resetGame() {
playerScore = 0;
computerScore = 0;
playerScoreSpanElement.innerText = playerScore;
computerScoreSpanElement.innerText = computerScore;
winnerMsgElement.style.display = “none”;
resetGameBtn.style.display = “none”;
optionsContainer.style.display = “block”;
roundResultsMsg.innerText = “”

};

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”);
});

pkdvalis · July 21, 2024, 3:48pm

Please format your code like this:

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

pkdvalis · July 21, 2024, 3:49pm

Check that you have all your matching opening and closing braces for each block of code.

mbas · July 21, 2024, 4:33pm

unction 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;
const WINNINGSCORE = 3
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 === WINNING_SCORE) {
        winnerMsgElement.innerText = "Player has won the game!";
        winnerMsgElement.style.display = "block";
        optionsContainer.style.display = "none";
        resetGameBtn.style.display = "block";
    } else if (computerScore === WINNING_SCORE) {
        winnerMsgElement.innerText = "Computer has won the game!";
        winnerMsgElement.style.display = "block";
        optionsContainer.style.display = "none";
        resetGameBtn.style.display = "block";
  
function resetGame() {
    playerScore = 0;
    computerScore = 0;
    playerScoreSpanElement.innerText = playerScore;
    computerScoreSpanElement.innerText = computerScore;
    winnerMsgElement.style.display = "none";
    resetGameBtn.style.display = "none";
    optionsContainer.style.display = "block";
    roundResultsMsg.innerText = ""
}

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");
});

I am getting this error now You should update thewinnerMsgElement if there is a winner. You should hide the optionsContainerand if the player or computer has reached three points. You should show the resetGameBtn button if the player or computer has reached three points. // tests completed // console output [ReferenceError: playerScore is not defined] [ReferenceError: playerScore is not defined] [ReferenceError: computerScore is not defined]

pkdvalis · July 21, 2024, 5:01pm

Check that you have all your matching opening and closing braces for each block of code. You are still missing one.

mbas · July 21, 2024, 5:04pm

this what it looks like now

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;
const WINNINGSCORE = 3
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 === WINNING_SCORE) {
        winnerMsgElement.innerText = "Player has won the game!";
        winnerMsgElement.style.display = "block";
        optionsContainer.style.display = "none";
        resetGameBtn.style.display = "block";
    } else if (computerScore === WINNING_SCORE) {
        winnerMsgElement.innerText = "Computer has won the game!";
        winnerMsgElement.style.display = "block";
        optionsContainer.style.display = "none";
        resetGameBtn.style.display = "block";
    } 
function resetGame() {
    playerScore = 0;
    computerScore = 0;
    playerScoreSpanElement.innerText = playerScore;
    computerScoreSpanElement.innerText = computerScore;
    winnerMsgElement.style.display = "none";
    resetGameBtn.style.display = "none";
    optionsContainer.style.display = "block";
    roundResultsMsg.innerText = ""
}

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");
});

I am getting this error
You should update the winnerMsgElement if there is a winner.
You should hide the optionsContainer and if the player or computer has reached three points.
You should show the resetGameBtn button if the player or computer has reached three points.
// tests completed
// console output
Uncaught ReferenceError: WINNING_SCORE is not defined

pkdvalis · July 21, 2024, 5:07pm

What do you think this error means?

To be honest I don’t think you should use this variable since the instructions never ask you to create it.

mbas · July 21, 2024, 5:10pm

if i remove it messes up everything

pkdvalis · July 21, 2024, 5:25pm

Replace it with something mentioned in the instructions.

Topic		Replies	Views
Review DOM Manipulation by Building a Rock, Paper, Scissors Game - Step 5 JavaScript	3	2902	November 21, 2024
Review DOM Manipulation by Building a Rock, Paper, Scissors Game - Step 5 JavaScript	1	124	February 23, 2025
Review DOM Manipulation by Building a Rock, Paper, Scissors Game - Step 5 JavaScript	3	61	January 8, 2025
Review DOM Manipulation by Building a Rock, Paper, Scissors Game - Step 5 JavaScript	2	86	November 6, 2024
Review DOM Manipulation by Building a Rock, Paper, Scissors Game - Step 5 JavaScript	3	1227	November 18, 2024

Review DOM Manipulation by Building a Rock, Paper, Scissors Game - Step 5

Your code so far

Your browser information:

Challenge Information:

Related topics