Passing and manipulating global variables in a function

Question

I am just going through some tutorials to learn js and am having an issue understanding how js passes variables across functions. A simple program that increments platers score on click to a max value and resets scores.

Creating a function inside the event listener for each player button was relatively easy but I realized I was reusing code so wanted to make a function to do the work for both. My issue is that when I update variables inside the function they do not correlate to the global variables and they are not updated.

code here:

// global variables
var inputScore = document.querySelector("#maxScore")
var p1btn = document.querySelector("#p1Input");
var p2btn = document.querySelector("#p2Input");
var reset = document.querySelector("#reset");

var p1 = document.querySelector("#p1");
var p1Score = 0;
var p2 = document.querySelector("#p2");
var p2Score = 0;

var maxScore = 5
var gameOver =false;

// event listeners
p1btn.addEventListener("click",function(){
  scoreUpdate(p1,p1Score,maxScore,gameOver);
});

p2btn.addEventListener("click",function(){
  scoreUpdate(p2,p2Score,maxScore,gameOver);
});
// reset Button
reset.addEventListener("click",function(){
  // make sure you dont hit game over twice
  if(gameOver){
    gameOver=!gameOver
  }
  p1Score=0
  p1.textContent = p1Score;
  p1.classList.remove("green")
  p2Score=0
  p2.textContent = p2Score;
  p2.classList.remove("green")
});

//updateScore function to be called on either player buttons
function scoreUpdate(playerDisplay, playerScore,maxScore,gameOver){
  console.log("hit")
  console.log("PlayerDisplay",playerDisplay,"playerScore",playerScore,"maxScore",maxScore,"gameOver",gameOver)
  if(playerScore < maxScore & !gameOver){
      playerScore++;
      playerDisplay.textContent = playerScore;
      if(playerScore ==maxScore){
        gameOver=!gameOver
        playerDisplay.classList.add("green")
      }
    }
  console.log("PlayerDisplay",playerDisplay,"playerScore",playerScore,"maxScore",maxScore,"gameOver",gameOver)

}

Thanks in advance!

Answer 1

You need to learn about variable scope.
When passing gameOver to scoreUpdate function, it becomes a local variable defined within that function's body; and it is different from the global gameOver variable.

If you want to modify the global one, don't pass it as a param.

There are plenty of articles on this online to learn more: https://www.sitepoint.com/demystifying-javascript-variable-scope-hoisting/

Answer 2

You can use return to override the old variable, this will override the old variable with the new data.

p1Score = scoreUpdate(p1,p1Score,maxScore,gameOver);
p2Score = scoreUpdate(p2,p2Score,maxScore,gameOver);

function scoreUpdate(playerDisplay, playerScore,maxScore,gameOver){
  console.log("hit")
  console.log("PlayerDisplay",playerDisplay,"playerScore",playerScore,"maxScore",maxScore,"gameOver",gameOver)
  if(playerScore < maxScore & !gameOver){
      playerScore++;
      playerDisplay.textContent = playerScore;
      if(playerScore ==maxScore){
        gameOver=!gameOver
        playerDisplay.classList.add("green")
      }
    }
  console.log("PlayerDisplay",playerDisplay,"playerScore",playerScore,"maxScore",maxScore,"gameOver",gameOver)

return playerScore;
}