classList.add has stopped my code from running. I can't figure out why. Can you?
Question
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"); 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 answers
solution1
1 2018-08-09 09:06:15
You are missing the opening and closing brackets around the statements in the if block:
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; 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:
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>
solution2
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){
and you need to add a curly brace: if (p2Score === winningScore) (in both eventlisteners)
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.