Need some explanation about this code

Need some explanation about this code
0

#1

So im doing a score keeper exercise by my self after doing a code along from Colt Steele’s bootcamp’s score keeper project. Im stuck at trying to figure out why incrementing counter in button function is not working while being outside of if statement that i made compared to Colt’s way?
Here’s Colt’s code:

var p1Button = document.querySelector("#p1");
var p2Button = document.getElementById("p2");
var resetButton = document.getElementById("reset");
var p1Display = document.querySelector("#p1Display");
var p2Display = document.querySelector("#p2Display");
var numInput = document.querySelector("input");
var winningScoreDisplay = document.querySelector("p span");
var p1Score = 0;
var p2Score = 0;
var gameOver = false;
var winningScore = numInput;

p1Button.addEventListener("click", function() {
    if (!gameOver) {
        p1Score++;
        if(p1Score === winningScore) {
            p1Display.classList.add("winner");
            gameOver = true;
        }
        p1Display.textContent = p1Score;
    }
    
}

Here’s mine:

var scorePlayer1 = document.getElementById("player1");
var scorePlayer2 = document.getElementById("player2");
var playingUpTo = document.getElementById("playingUpTo");
var button1 = document.getElementById("pressPlayer1");
var button2 = document.getElementById("pressPlayer2");
var setTo = document.getElementById("setTo");
var counter1 = 0;
var counter2 = 0;
var gameOver = false;

button1.addEventListener("click", function() {
    counter1++;
   if (counter1 === setTo.value) {
      gameOver = true;
   }
});

I tried doing it with a while loop and without using boolean’s but couldnt make it work. Any possible different ideas? Im asking because Colt in the end said there’s no better way of doing something like this exercise.


#2

i also paid for Colt Steele’s bootcamp, till now i have only completed 25% of the course.


#3

Try changing with this:

button1.addEventListener("click", function() {

if(!gameOver ){
    counter1++;
   if (counter1 === setTo.value) {
      gameOver = true;
   }
}
});

I just added outer if statement that allows incrementation to take place until gameOver holds true That’s same like above example.


#4

if (!gameOver) will run as long as condition is not false like it was already set? And it will run all the way untill it gets to gameOver = true?


#5

The above is the same as writing:

if (gameOver === false) {

As long as game is false, counter1 is incremented by 1 and then a check to see if counter1 is equal to setTo.value is made. If it equal, the game is over (gameOver = true), so the next time button1 is clicked the outer if statement will no longer evaluate to true and the code block inside the outer if will not run.


#6

From my understanding i thought !gameOver would mean that it turned false into true? Or i guess i was wrong? GameOver=false becoming true if we put ! mark in front of it?


#7

In the if statement, if gameOver is false and you negate false (with the exclamation point in front of it), then the if statement is evaluating if (true), which allows the code block to execute. Remember the actual value of the gameOver variable is not changed unless an assignment is made (i.e. like gameOver = true OR gameOver = false). The if statement just evaluates an expression.


#8

Oh i got you now thanks.