javascript - 如何在 JavaScript 中的函数内部更改两个不同的全局变量

Question

这是我在 StackOverflow 中的第一个问题..

我现在正在学习 JavaScript，并且正在尝试重构一些代码以使其更易于阅读且更短。

我需要在单击按钮时向显示中的玩家得分添加一个点，因此我创建了一个函数“addPoint”，它需要 2 个参数，一个是玩家得分，另一个是我在其中的玩家显示显示点...

这就是我所拥有的...

var p1 = document.querySelector("#p1");
var p2 = document.getElementById("p2");
var dis1 = document.querySelector("#dis1");
var dis2 = document.getElementById("dis2");
var btnReset = document.querySelector("#reset");
var input = document.getElementsByTagName("input");
var winDis = document.querySelector("#num");
var p1Score = 0;
var p2Score = 0;
var gameOver = false;
var winScore = 5;

p1.addEventListener("click", function() {
  addPoint(p1Score, dis1);
});

p2.addEventListener("click", function() {
  addPoint(p2Score, dis2);
});

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

input.addEventListener("change", function() {
  winDis.textContent = this.value;
  winScore = Number(this.value);
  reset();
});

function addPoint(pScore, display) {
  if (!gameOver) {
    pScore++;    
    if (pScore === winScore) {
      display.classList.add("winner");
      gameOver = true;
    }
    display.textContent = pScore;    
  }
}

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

问题是，当我单击任何按钮时，该函数会将 1 添加到分数中，但它永远不会更改全局变量 p1Score 或 p2Score，因此每当我再次单击玩家按钮时，它总是显示1，因为它需要初始这些变量的值，所以我的函数不会将新值返回给这些变量，我的问题是我在这里缺少什么？我无法在这里找到我的特定问题的答案。

提前致谢

Answer 1

我认为你的问题是这样的:当您执行此操作 addPoint(p1Score, dis1); 时，您并未将变量 p1Score 传递给您的函数，而仅传递其当前值。
在 addPoint 函数中，这个值(只是一个数字)被分配给一个新变量，即参数 pScore。
因此，当您执行 pScore++ 时，您将向新变量添加 1，而不是向原始 p1Score 添加 1。您只能通过显式执行 p1Score =//Something 来修改此变量。一种解决方案是将添加移动到事件处理程序内:

p1.addEventListener("click", function() {
  p1Score++
  addPoint(p1Score, dis1);
});
function addPoint(pScore, display) {
  if (!gameOver) {   
    if (pScore === winScore) {
      display.classList.add("winner");
      gameOver = true;
    }
    display.textContent = pScore;    
  }
}

或者使用一个对象(其属性可以作为字符串访问)来存储您的分数:

var p1 = document.querySelector("#p1");
var p2 = document.getElementById("p2");
var dis1 = document.querySelector("#dis1");
var dis2 = document.getElementById("dis2");
var btnReset = document.querySelector("#reset");
var input = document.getElementsByTagName("input");
var winDis = document.querySelector("#num");

var scores = {
    "p1": 0,
    "p2": 0
}
var gameOver = false;
var winScore = 5;

p1.addEventListener("click", function() {
  addPoint('p1', dis1);
});

p2.addEventListener("click", function() {
  addPoint('p2', dis2);
});

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

input.addEventListener("change", function() {
  winDis.textContent = this.value;
  winScore = Number(this.value);
  reset();
});

function addPoint(player, display) {
  if (!gameOver) {
    scores[player] += 1;
    if (scores[player] === winScore) {
      display.classList.add("winner");
      gameOver = true;
    }
    display.textContent = scores[player];    
  }
}

function reset() {
  scores.p1 = 0;
  scores.p2 = 0;
  dis1.textContent = 0;
  dis2.textContent = 0;
  dis1.classList.remove("winner");
  dis2.classList.remove("winner");
  gameOver = false;
}