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

JavaScript
1

Tell us what’s happening:

I made this code but the challenge doesn’t accept it. It works i tried it on VSCode and worked well.
function getRandomComputerResult() {
const output = options[Math.floor(Math.random() * options.length)];
return output
}
console.log(getRandomComputerResult());
The challenge’s “correct” code is the following:

function getRandomComputerResult() {
  const options = ["Rock", "Paper", "Scissors"];
  const randomIndex = Math.floor(Math.random() * options.length);
  return options[randomIndex];

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rock, Paper, Scissors game</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <h1>Let's play Rock, Paper, Scissors!</h1>
    <main>
      <details class="rules-container">
        <summary>Rules to the game</summary>

        <p>You will be playing against the computer.</p>
        <p>You can choose between Rock, Paper, and Scissors.</p>
        <p>The first one to three points wins.</p>

        <p>Here are the rules to getting a point in the game:</p>
        <ul>
          <li>Rock beats Scissors</li>
          <li>Scissors beats Paper</li>
          <li>Paper beats Rock</li>
        </ul>
        <p>
          If the player and computer choose the same option (Ex. Paper and
          Paper), then no one gets the point.
        </p>
      </details>

      <div class="score-container">
        <strong
          >Player Score: <span class="score" id="player-score">0</span></strong
        >
        <strong
          >Computer Score:
          <span class="score" id="computer-score">0</span></strong
        >
      </div>

      <section class="options-container">
        <h2>Choose an option:</h2>
        <div class="btn-container">
          <button id="rock-btn" class="btn">Rock</button>
          <button id="paper-btn" class="btn">Paper</button>
          <button id="scissors-btn" class="btn">Scissors</button>
        </div>
      </section>

      <div class="results-container">
        <p id="results-msg"></p>
        <p id="winner-msg"></p>
        <button class="btn" id="reset-game-btn">Play again?</button>
      </div>
    </main>
    <script src="./script.js"></script>
  </body>
</html>


/* file: styles.css */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --very-dark-blue: #0a0a23;
  --white: #ffffff;
  --yellow: #f1be32;
  --golden-yellow: #feac32;
}

body {
  background-color: var(--very-dark-blue);
  text-align: center;
  color: var(--white);
}

h1 {
  margin: 15px 0 20px;
}

.btn {
  cursor: pointer;
  width: 100px;
  margin: 10px;
  color: var(--very-dark-blue);
  background-color: var(--golden-yellow);
  background-image: linear-gradient(#fecc4c, #ffac33);
  border-color: var(--golden-yellow);
  border-width: 3px;
}

.btn:hover {
  background-image: linear-gradient(#ffcc4c, #f89808);
}

.rules-container {
  padding: 10px 0;
  margin: auto;
  border-radius: 15px;
  border: 5px solid var(--yellow);
  background-color: var(--white);
  color: var(--very-dark-blue);
}

.rules-container ul {
  list-style-type: none;
}

.rules-container p {
  margin: 10px 0;
}

@media (min-width: 760px) {
  .rules-container {
    width: 60%;
  }
}

.score-container {
  display: flex;
  justify-content: space-around;
  margin: 30px 0;
  font-size: 1.2rem;
}

.score {
  font-weight: 500;
}

.results-container {
  font-size: 1.3rem;
  margin: 15px 0;
}

#winner-msg {
  margin-top: 25px;
}

#reset-game-btn {
  display: none;
  margin: 20px auto;
}


/* file: script.js */

// User Editable Region

function getRandomComputerResult() {
  const output = options[Math.floor(Math.random() * options.length)];
  return output
}
console.log(getRandomComputerResult());

// 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/125.0.0.0 Safari/537.36 Edg/125.0.0.0

Challenge Information:

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

1 Like
2

I’m just curious.Can someone tell me why better the code what the challenge accept than my code?Thank you for the answer!

1 Like
3

Hi @xjva

Uncaught ReferenceError: options is not defined

You have an options variable, however it it not declared or defined.

Happy coding

1 Like
4

That is not working, because you deleted the assignment of strings to the options array .

1 Like
5

My bad(I had options array,just didn’t copied here) my whole code was that in VSCode:
const options = [“Rock”, “Paper”, “Scissors”];

function getRandomComputerResult() {
const output = options[Math.floor(Math.random() * options.length)];
return output
}

console.log(output);

1 Like
6

why is options outside the function?

7

I copied this from Vscode .I just copied the options first to VScode to try out my code.In the challenge there is inside the function.But it should work from global scope too right?In the challenge it was inside.

8

I’m really beginner just I’d like to know why better the challenge 's solution than mine.I’ll learn from this

9

you should not have functions interact with the global scope if possible

2 Likes
10

Alright.Thank you for the answer.I’ll avoid this

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.