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

Tell us what’s happening:

the logic of my code looks correct but I’m unable to move ahead, where am I going wrong

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <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" />
    <h1>Let's play Rock, Paper, Scissors!</h1>
      <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>
          <li>Rock beats Scissors</li>
          <li>Scissors beats Paper</li>
          <li>Paper beats Rock</li>
          If the player and computer choose the same option (Ex. Paper and
          Paper), then no one gets the point.

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

      <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 class="results-container">
        <p id="results-msg"></p>
        <p id="winner-msg"></p>
        <button class="btn" id="reset-game-btn">Play again?</button>
    <script src="./script.js"></script>

/* file: styles.css */
*::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 options = ["Rock", "Paper", "Scissors"];
  return options[Math.floor(Math.random()*3)+1];


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

Challenge Information:

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

what are the possible numbers from here? You need a value between the numbers 0, 1 and 2

It’s the length of the options array