Блог

Я просто просматриваю несколько руководств по изучению js, и у меня возникла проблема с пониманием того, как js передает переменные между функциями. Простая программа, которая увеличивает оценку platers по щелчку мыши до максимального значения и сбрасывает оценки.

Создать функцию внутри прослушивателя событий для каждой кнопки проигрывателя было относительно легко, но я понял, что повторно использую код, поэтому хотел создать функцию, которая выполняла бы работу за оба. Моя проблема в том, что когда я обновляю переменные внутри функции, они не соотносятся с глобальными переменными и не обновляются.

код здесь:

 // 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 amp; !gameOver){
      playerScore  ;
      playerDisplay.textContent = playerScore;
      if(playerScore ==maxScore){
        gameOver=!gameOver
        playerDisplay.classList.add("green")
      }
    }
  console.log("PlayerDisplay",playerDisplay,"playerScore",playerScore,"maxScore",maxScore,"gameOver",gameOver)

}
  

Заранее спасибо!

Вам нужно узнать о области видимости переменных.
При передаче gameOver в scoreUpdate функцию она становится локальной переменной, определенной в теле этой функции; и она отличается от глобальной gameOver переменной.

Если вы хотите изменить глобальную переменную, не передавайте ее как параметр.

В Интернете есть множество статей по этому вопросу, чтобы узнать больше:https://www.sitepoint.com/demystifying-javascript-variable-scope-hoisting /

Вы можете использовать return для переопределения старой переменной, это заменит старую переменную новыми данными.

 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 amp; !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;
}