0

Very new to JS and trying to create a Rock Paper Scissors game. I'm only just starting on the JS side of things and I am hitting an error on line 1 when declaring a const.

I've seen if this was an issue with userScore and userScore_Span conflicting by removing the latter. Also if i remove line 1 then i get the same error for line 2.

Identifier 'userScore' has already been declared

//Initialising the variables
const userScore = 0;
const computerScore = 0;
const userScore_span = document.getElementById("user-score");
const computerScore_span = document.getElementById("comp-score");
const scoreBoard_div = document.querySelector(".score-board");
const result_div = document.querySelector(".result");
const rock_div = document.getElementById("r");
const paper_div = document.getElementById("p");
const scissors_div = document.getElementById("s");

//This is the entire js file
@import url('https://fonts.googleapis.com/css?family=Asap&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Asap, sans-serif;
}

body {
  background: #292C34;
}

header {
  background: white;
  padding: 20px
}

header > h1 {
  color: #252728;
  text-align: center;
  font-size: 48px;
}

.score-board {
  margin: 20px auto;
  border: 3px solid white;
  border-radius: 3px;
  text-align: center;
  padding: 15px 20px;
  width: 200px;
  color: white;
  font-size: 46px;
  position: relative;
}

.badge {
  background: red;
  color: white;
  font-size: 14px;
  padding: 5px;
  border-radius: 5px;
}

#user-label {
  position: absolute;
  top: 40px;
  left: -20px;
}

#comp-label {
  position: absolute;
  top: 40px;
  right: -30px;
}

.result > p {
  text-align: center;
}

.result {
  font-size: 40px;
  color: white;
}

.choices {
  margin: 40px;
  text-align: center;
}

.choice {
  border: 4px solid white;
  display: inline-block;
  border-radius: 50%;
  padding: 10px;
  margin: 0 20px;
  transition: all 0.6s ease;
}
.choice:hover {
  cursor: pointer;
  background: #24273E;
}

#action-message {
  text-align: center;
  color: white;
  font-weight: bold;
  margin-top: 10px;
  font-size: 32px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Rock Paper Scissors</title>
    <link rel="stylesheet" href="styles.css">
    <script src="app.js" charset="utf-8"></script>
  </head>
  <body>
    <header>
      <h1>Rock Paper Scissors</h1>
    </header>

    <div class="score-board">
      <div id="user-label" class="badge">User</div>
      <div id="comp-label" class="badge">Comp</div>
      <span id="user-score">0</span>:<span id="comp-score">0</span>
    </div>

    <div class="result">
      <p>Paper covers rock. You Win!</p>
    </div>

    <div class="choices">
      <div class="choice" id="r">
        <img src="images/rock.png" alt="">
      </div>
      <div class="choice" id="p">
        <img src="images/paper.png" alt="">
      </div>
      <div class="choice" id="s">
        <img src="images/scissors.png" alt="">
      </div>
    </div>
    <p id="action-message">Make Your Move</p>
    <script src="app.js"></script>
  </body>
</html>
Joel
  • 13
  • 4

2 Answers2

2

You have

<script src="app.js">

twice in your HTML. Once in the <head>, and again at the end of <body>.

The variables are all declared the first time it's loaded, so they're duplicates when you load it the second time.

Barmar
  • 741,623
  • 53
  • 500
  • 612
2

You are loading app.js into your HTML twice - once on the top of your file and then once again just before the end of your body. This will run the javascript twice and try to redeclare the const you've defined. const variables can not be redefined in javascript, which is why you are seeing this error.

This will actually happen to all of the variables you have defined, you're only seeing it happen on userScore because it happens to be the first variable declaration.

Solution: Remove one of the <script> tags that are loading app.js

Alex Dovzhanyn
  • 1,028
  • 6
  • 14