已声明标识符 - 已声明标识符“userScore”答案

【问题标题】：Identifier already declared - Identifier 'userScore' has already been declared已声明标识符 - 已声明标识符“userScore”
【发布时间】：2019-07-09 20:03:05
【问题描述】：

对 JS 非常陌生，正在尝试创建一个石头剪刀布游戏。我只是从 JS 方面开始，在声明 const 时我在第 1 行遇到错误。

我发现这是否是 userScore 和 userScore_Span 冲突的问题通过删除后者。此外，如果我删除第 1 行，那么我会在第 2 行得到相同的错误。

标识符“userScore”已被声明

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

【问题讨论】：

运行您的代码时没有任何错误。您可能已经加载了两次相同的 JS 脚本。
您包含两次“app.js”。

标签： javascript html css

【解决方案1】：

您两次将app.js 加载到 HTML 中 - 一次在文件顶部，然后再次在正文末尾之前。这将运行 javascript 两次并尝试重新声明您定义的 const。 const 变量无法在 javascript 中重新定义，这就是您看到此错误的原因。

这实际上会发生在您定义的所有变量上，您只会在 userScore 上看到它，因为它恰好是第一个变量声明。

解决方案：删除正在加载app.js的<script>标签之一

【讨论】：

【解决方案2】：

你有

<script src="app.js">

在您的 HTML 中添加两次。一次在<head> 中，再次在<body> 末尾。

变量都是在第一次加载时声明的，所以在第二次加载时它们是重复的。

【讨论】：