classList.add已停止我的代码运行。 我不知道为什么。 你是否可以？
[英]classList.add has stopped my code from running. I can't figure out why. Can you?
问题描述
var p1Button = document.querySelector("#p1"); var p2Button = document.getElementById("p2"); var p1Display = document.querySelector("#p1Display"); var p2Display = document.querySelector("#p2Display"); var p1Score = 0; var p2Score = 0; var gameOver = false; var winningScore = 5; p1Button.addEventListener("click", function(){ if(!gameOver){ p1Score++; if (p1Score === winningScore) p1Display.classList.add("winner"); gameOver = true; } p1Display.textContent = p1Score; }); p2Button.addEventListener("click", function(){ if(!gameOver){ p2Score++; if (p2Score === winningScore) p2Display.classList.add("winner"); gameOver = true; } p2Display.textContent = p2Score; });
.winner { color: green; }
<h1><span id = "p1Display">0</span> to <span id = "p2Display">0</span></h1> <p>Playing to: 5</p> <input type="number"> <button id="p1" type="button">Player One</button> <button id="p2" type="button">Player Two</button> <button id="reset" type="button">Reset</button>
The p2Display.classList.add("winner"); 
p2Display.classList.add("winner"); lines on my two functions has stopped my code from working. 我的两个函数上的代码行使我的代码无法正常工作。
If you remove it the code works fine. 如果将其删除，则代码可以正常工作。
However, I need that line of code in order to complete this game. 但是，我需要该行代码才能完成此游戏。
Is there a reason why it's stopping my game from working? 有什么理由会阻止我的游戏正常运行？
I can't seem to figure it out. 我似乎无法弄清楚。
2 个解决方案
解决方案1
1 2018-08-09 09:06:15
You are missing the opening and closing brackets around the statements in the if block: 您缺少if块中语句前后的左括号和右括号：
if (p1Score === winningScore)
p1Display.classList.add("winner");
gameOver = true;
So, only the first statement is considered part of the if block, while the second statement gameOver = true; 因此，只有第一个语句被视为if块的一部分，而第二个语句gameOver = true; executes regardless. 无论执行。 As a result, the game gets over with the first click event. 结果，游戏结束了第一次单击事件。
Here's the updated snippet with opening and closing brackets added around the if block: 这是更新的代码段，在if块周围添加了左括号和右括号：
var p1Button = document.querySelector("#p1"); var p2Button = document.getElementById("p2"); var p1Display = document.querySelector("#p1Display"); var p2Display = document.querySelector("#p2Display"); var p1Score = 0; var p2Score = 0; var gameOver = false; var winningScore = 5; p1Button.addEventListener("click", function() { if (!gameOver) { p1Score++; if (p1Score === winningScore) { p1Display.classList.add("winner"); gameOver = true; } } p1Display.textContent = p1Score; }); p2Button.addEventListener("click", function() { if (!gameOver) { p2Score++; if (p2Score === winningScore) { p2Display.classList.add("winner"); gameOver = true; } } p2Display.textContent = p2Score; });
.winner { color: green; }
<head> <title>Score Keeper</title> <link rel="stylesheet" type="text/css" href="scoreKeeper.css"> </head> <body> <h1><span id="p1Display">0</span> to <span id="p2Display">0</span></h1> <p>Playing to: 5</p> <input type="number"> <button id="p1" type="button">Player One</button> <button id="p2" type="button">Player Two</button> <button id="reset" type="button">Reset</button> <script type="text/javascript" src="scoreKeeper.js"></script> </body>
解决方案2
0 2018-08-09 09:23:19
You messed up with your curly braces. 你弄乱了花括号。
you need to remove the opening curly brace here: if(!gameOver){ 您需要在此处删除左花括号：if（！gameOver）{
and you need to add a curly brace: if (p2Score === winningScore) (in both eventlisteners) 并且您需要添加一个大括号：if（p2Score === winningScore）（在两个事件侦听器中）
p2Button.addEventListener("click", function(){
if(!gameOver)
p2Score++;
if (p2Score === winningScore){
p2Display.classList.add("winner");
gameOver = true;
}
p2Display.textContent = p2Score;})
otherwise your execution order of the lines is messed up 否则，您的行的执行顺序会混乱
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.