标识符已声明-标识符“ userScore”已声明
[英]Identifier already declared - Identifier 'userScore' has already been declared
问题描述
JS的新手，正尝试创建Rock Paper Scissors游戏。 我只是从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>
2 个解决方案
解决方案1
2 2019-07-09 20:08:04
你有
<script src="app.js">
在HTML中两次。 一次在<head> ，再一次在<body>末尾。
变量在第一次加载时都被声明，因此在您第二次加载时它们是重复的。
解决方案2
1 已采纳 2019-07-09 20:09:33
您将app.js两次加载到HTML中-一次在文件顶部，然后再次在正文结尾之前。 这将运行javascript两次，并尝试重新声明您已定义的const 。 不能在javascript中重新定义const变量，这就是为什么您看到此错误的原因。
这实际上会发生在您定义的所有变量上，您只会在userScore上看到它，因为它恰好是第一个变量声明。
解决方案：删除正在加载app.js的<script>标记之一
JavaScript - “标识符已经声明”
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.