Doubt about the scope

1 
var p1button=document.getElementById('p1');
var p2button=document.getElementById('p2');
var p1display=document.querySelector('#p1display');
var p2display=document.getElementById('p2display');
var p1score=0;
var p2score=0;
var winningscore=5;
var gameover=false;

p1button.addEventListener('click',function(){
    
    if(!gameover)
    {
        p1score++;
        if (p1score===winningscore)
        {
            gameover=!gameover;
            p1display.classList.add('winner');
        }
    }
    p1display.textContent=p1score;
});

p2button.addEventListener('click',function(){
    if (!gameover)
    {
        p2score++;
        if(p2score===winningscore)
        {
            gameover=true;
            p2display.classList.add('winner');
        }
    }
    p2display.textContent=p2score;
});

here my doubt is when (p1score===winningscore) then the (gameover=true) so when i
increment p2score it doesn’t increases may be it’s because gameover=true. But my question is the scope of that gameover is till the p1addeventlistener so why is it affecting the the global value of gameover.

2

All your variables are declared in the global scope so any changes in another code block or anywhere else will change the value of the variable in the global scope where they are declared.

Here are some resources.