Build a Rock, Paper, Scissors Game - Step 13

JavaScript
1

Tell us what’s happening:

hey there!
I have followed all the instructions given and even tested my code by playing the game and it works fine.

However on clicking “Check Your Code” the console displays “You should add an event listener to the resetGameBtn button. The event listener should take in a “click” event and a reference to the resetGame function.” but I have done this!

What mistake have I made in the code. Please help! Thank you

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */
// User Editable Region

function resetGame () {
    playerScore = 0;
    computerScore = 0;

    roundResultsMsg.innerText = "";
    roundResultsMsg.innerText = "";
    roundResultsMsg.innerText = "";
    
    computerScoreSpanElement.innerText = 0;
    playerScoreSpanElement.innerText = 0;

    resetGameBtn.style.display = "none";
    optionsContainer.style.display = "";

}

// User Editable Region

Your browser information:

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

Challenge Information:

Build a Rock, Paper, Scissors Game - Step 13

2

Hi @hrugonge,

I don’t see an event listener. Please post your full code so we can help you.

Happy coding!

3 
const options = \["Rock", "Paper", "Scissors"\];



function getRandomComputerResult() {

  const randomIndex = Math.floor(Math.random() \* options.length);

  return options\[randomIndex\];

}



function hasPlayerWonTheRound(playerChoice, computerChoice) {

  return (

    (playerChoice === "Rock" && computerChoice === "Scissors") ||

    (playerChoice === "Scissors" && computerChoice === "Paper") ||

    (playerChoice === "Paper" && computerChoice === "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 || computerScore === 3) {

    winnerMsgElement.innerText =\`${

      playerScore === 3 ? "Player" : "Computer"

    } has won the game!\`;



    resetGameBtn.style.display = "block";

    optionsContainer.style.display = "none";

  }

};



function resetGame () {

    playerScore = 0;

    computerScore = 0;



    winnerMsgElement.innerText = "";

    roundResultsMsg.innerText = "";

    

    

    computerScoreSpanElement.innerText = 0;

    playerScoreSpanElement.innerText = 0;



    resetGameBtn.style.display = "none";

    optionsContainer.style.display = "";



}



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

});



resetGameBtn.addEventListener("click", resetGame);
4

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read and test.

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

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

5

Were you asked to implement the resetGame function in this step? Try removing that.

6

Thank you! The code has passed :+1: