javascript - 已声明标识符 - 已声明标识符“userScore”
问题描述
对 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>
解决方案
你有
<script src="app.js">
在您的 HTML 中两次。一次在<head>
,又一次在结束<body>
。
这些变量都是在第一次加载时声明的,因此在第二次加载时它们是重复的。
推荐阅读
- uwp - UWP App 中的 IdentityModel.OidcClient 从 3.1.2 迁移到 4.0
- typo3-10.x - TYPO3 Gridelements 10 - Gridelement Link Wizard Flexform
- neo4j - 获取neo4j中最重要的节点
- python-3.x - 如何使 python functools.lru_cache 返回值不可变?
- javascript - Nuxt JS / Vue Jest 检查页面上是否存在类名元素
- node.js - 如何使用 NodeJS 和 ESC/POS 在蓝牙(票务)打印机上打印
- c++ - 是否可以使用联合成员作为对象存储?
- helmet.js - 头盔js中的内容安全策略
- java - 我可以使用spring boot和MySQL设置过期时间吗?
- html - 如何检查html中的空字符串