Need a bit of help with this code

Need a bit of help with this code
0

#1

So im playing around with this boolean code here, im understanding the way it works but i need some explanation in this situation. IsPurple is set to false, but first if statement is not false to the code inside of brackets will run and isPurple in it is true, but in second if isPurple is false so with that condition it shouldnt be working but since it has isPurple set to true in curly brackets it still shows the purple background. Can someone explain this to me a bit, im still trying to get my head around this boolean’s logic that i havent used before at all untill couple of days ago.
Here’s html:

<button>Click</button>

JS:

var isPurple = false;
 
document.querySelector("button").addEventListener("click", function() {
    if (!isPurple) {
        document.body.style.background = "white";
        isPurple = true;
    } else if (isPurple) {
        document.body.style.background = "purple";
        isPurple = true;
    }
})

#2

The first if statement checks if the value of isPurple is not equal to true (sames as checking if it is equal to false). If isPurple is false (which it is based on the initialize value of false), then change the background to white and assign the value true to isPurple. Otherwise, your else if evaluates to true because isPurple was true, you change the background to purple and also assign the value true to isPurple.

Add the following to your html:

<div id="isPurpleValue"></div>

and change your JavaScript to the following, so you can see the value of isPurple at different points in your code’s execution:

var isPurple = false;
 
isPurpleValue.innerText = "Current value of isPurple is " + isPurple;

document.querySelector("button").addEventListener("click", function() {
    if (!isPurple) {
        document.body.style.background = "white";
        isPurple = true;
    } else if (isPurple) {
        document.body.style.background = "purple";
        isPurple = true;
    }
    isPurpleValue.innerText = "After button click the current value of isPurple is " + isPurple;
})

#3

So with this code then right here that i have,:


var p1Button = document.querySelector("#p1");
var p2Button = document.getElementById("p2");
var p1Display = document.querySelector("#p1Display");
var p2Display = document.querySelector("#p2Display");
var resetButton = document.getElementById("reset");
var numInput = document.querySelector("input");
var winningScoreDisplay = document.querySelector("p span");
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;
    }
});

resetButton.addEventListener("click", function() {
    reset();
});

function reset() {
    p1Score = 0;
    p2Score = 0;
    p1Display.textContent = 0;
    p2Display.textContent = 0;
    p1Display.classList.remove("winner");
    p2Display.classList.remove("winner");
    gameOver = false;
}

numInput.addEventListener("change", function() {
    winningScoreDisplay.textContent = numInput.value;
    winningScore = Number(numInput.value);
    reset();
});

When user keeps clicking one of the buttons eighter Player1 or Player2 that increments the score, once the score reaches the value that equals to what player had set it to with (winningScore) which means once player clicks on the button that increments the number to the equal winning Score’s value then he also reset’s gameOver’s false to true? So after that code has no way to run anymore after being set to true since it reached the winningScore’s value? And then once we click on reset button that has gameOver = false, it just resets gameOver to false again after we have been clicking Player1 or Player2 buttons that in the end reached winningScore’s value that set’s gameOver’s false to true?


#4

It seems like you understand what the code is doing now.


#5

I actually did now, its a really cool thing too, i cant believe i was banging my head over this for whole day now. Once the gameOver changes its value to true because of a single button click then if statement wont run anymore because condition is false. Thank you for your help, i really appreciate it. I cant believe of just how easy was it. I guess Colt hasnt really explained it as good as rest of his course unfortunately or my mind wasnt picking it well.