Need a bit of help with this code

JavaScript
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;
    }
})
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?

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.