javascript：在匿名函数中使用函数和全局变量（addEventListener）

所以我在Udemy上做了一个练习，要求我创建一个记分员应用程序

• “玩到：5”表示获胜分数
• 输入字段更改获胜分数
• 玩家1按钮增加左边的分数。当它达到获胜分数时，数值变为绿色，游戏结束
• 玩家2按钮增加右边的分数。当它达到获胜分数时，数值变为绿色，游戏结束
• 重置按钮重置游戏并从两名玩家的0开始
• 如果获胜分数在比赛中途更改（即分数不是0），分数将重置为0，“比赛目标：”值将根据输入字段中键入的内容更改

问题是：我创建了一个函数声明（称为incremenet（）），它将能够执行类似的任务，即增加玩家1和玩家2的分数。它包含1个参数，即玩家的分数（p1Score或p2Score）

我在玩家1上尝试了这个功能，但是分数没有超过1

我怀疑这与作用域或提升/执行堆栈有关。使用console.log，p1Score永远不会更新。它总是0。因此，p1ScoreDisplay始终为1

最重要的是，我注意到当p1Score达到获胜分数时也会出现错误。为了使分数增加超过1，我在事件侦听器中的increment（）函数调用之前放置了“p1Score++”。它将声明“scoreToIncrement.classList”未定义。这将在分数中添加一个“.winner”类。我相信这也与范围界定或吊装有关

我的理解是，由于这个增量函数嵌套在事件侦听器匿名函数中，因此增量函数应该仍然能够调用我在开始时声明的全局变量，并在执行该函数后相应地更新它们。但我想我的理解不是100%正确

希望有人能进一步解释错误，并在这里纠正我的理解。谢谢将尝试继续进行故障排除和读取（不确定闭包是否与此有关）

---

下面最新的javascriptcode显示了我的问题的答案。我没有使用变量，而是使用对象来允许它们是可变的（更改/改变）

我最初无法更改数字变量的原因是因为一种称为“通过共享调用”的方法。它包括按值传递数字（基本数据类型）和按引用传递对象或数组（非基本数据类型）。请参阅下面的链接以获得良好的解释。如果没有，您可以始终使用google搜索或wiki搜索“通过共享javascript调用”

我为对象使用了许多不同的变量名。当然，我们可以只使用一个对象来包含游戏的所有不同参数。例如 您可以创建如下所示的对象（在我的粗略解决方案中未使用）

这是我的肮脏/粗略的解决方案

var p1Button = document.querySelector("#P1");
var p2Button = document.querySelector("#P2");
var resetButton = document.querySelector("#Reset");

/*
var p1ScoreDisplay = document.querySelector("#h1p1Score");
var p2ScoreDisplay = document.querySelector("#h1p2Score");
*/
var p1ScoreDisplay = {
    scoreDisplay: document.querySelector("#h1p1Score")
};

var p2ScoreDisplay = {
    scoreDisplay: document.querySelector("#h1p2Score")
};
var inputValue = document.querySelector("#inputNum");
/*
var p1Score = 0;
var p2Score = 0;
*/

var p1Score = {
    score: 0
};

var p2Score = {
    score: 0
};

/*
var gameOver = false;
*/

var isGameOver = {
    gameOver: false
};

var winningScore = 5;
var displayWinningScore = document.querySelector("#winningScore");

/*function to increase the score of player 1 and player 2*/
function increment(scoreToIncrement,gameOverCheck,scoreToDisplay) {

    if (!gameOverCheck.gameOver) {

        scoreToIncrement.score++;

        if (scoreToIncrement.score === winningScore) {

            scoreToDisplay.scoreDisplay.classList.add("winner");
            console.log("Game Over!");
            gameOverCheck.gameOver = true;
        }

        scoreToDisplay.scoreDisplay.textContent = scoreToIncrement.score;
    }
}

p1Button.addEventListener("click", function () {

    increment(p1Score,isGameOver,p1ScoreDisplay);

    /*original code to increase the score of player 1
    if (!gameOver) {
    p1Score++;
    if (p1Score === winningScore) {
      console.log("Game Over!");
      p1ScoreDisplay.classList.add("winner");
      gameOver = true;
    }
    p1ScoreDisplay.textContent = p1Score;
  }
  */

});

p2Button.addEventListener("click", function () {
    increment(p2Score,isGameOver,p2ScoreDisplay);

    /*original code to increase the score of player 2
    if (!isGameOver.gameOver) {
        p2Score.score++;
        if (p2Score.score === winningScore) {
            console.log("Game Over!");
            p2ScoreDisplay.scoreDisplay.classList.add("winner");
            isGameOver.gameOver = true;
        }
        p2ScoreDisplay.scoreDisplay.textContent = p2Score.score;
    }
    */
});

function reset() {
    p1Score.score = 0;
    p1ScoreDisplay.scoreDisplay.textContent = p1Score.score;
    p1ScoreDisplay.scoreDisplay.classList.remove("winner");

    p2Score.score = 0;
    p2ScoreDisplay.scoreDisplay.textContent = p2Score.score;
    p2ScoreDisplay.scoreDisplay.classList.remove("winner");

    isGameOver.gameOver = false;

    inputValue.value = "";
}

resetButton.addEventListener("click", reset);

inputValue.addEventListener("change", function () {
    winningScore = Number(this.value);
    displayWinningScore.textContent = this.value;
    reset();
});

---

按引用传递和按值传递。欢迎来到堆栈溢出！Stack Overflow不是一个讨论论坛，它是一个问答网站，您可以在这里提出特定的编程问题，这些问题可以回答，而不是讨论。请阅读并编辑您的问题，以符合网站指南。像这样的离题问题通常是关闭的，但如果编辑为提出一个可回答的问题，可以重新打开。谢谢，谢谢@epascarello！找到解决我问题的好方法！

 var p1Button = document.querySelector("#P1");
    var p2Button = document.querySelector("#P2");
    var resetButton = document.querySelector("#Reset");
    var p1ScoreDisplay = document.querySelector("#h1p1Score");
    var p2ScoreDisplay = document.querySelector("#h1p2Score");
    var inputValue = document.querySelector("#inputNum");
    var p1Score = 0;
    var p2Score = 0;
    var gameOver = false;
    var winningScore = 5;
    var displayWinningScore = document.querySelector("#winningScore");

    function increment(scoreToIncrement,scoreDisplay) {

        if (!gameOver) {

            scoreToIncrement++;

            if (scoreToIncrement === winningScore) {

                scoreToIncrement.classList.add("winner");
                gameOver = true;
            }


            scoreDisplay.textContent = scoreToIncrement;
        }
    }

    p1Button.addEventListener("click", function () {
        increment(p1Score);

        /* This is the original code i have commented out and replaced with the increment function above

        if (!gameOver) {
        p1Score++;
        if (p1Score === winningScore) {
          console.log("Game Over!");
          p1ScoreDisplay.classList.add("winner");
          gameOver = true;
        }
        p1ScoreDisplay.textContent = p1Score;
      }
      */

    });

    p2Button.addEventListener("click", function () {
    /*Same function as the one above but using variables related to player 2 instead*/
        if (!gameOver) {
            p2Score++;
            if (p2Score === winningScore) {
                console.log("Game Over!");
                p2ScoreDisplay.classList.add("winner");
                gameOver = true;
            }
            p2ScoreDisplay.textContent = p2Score;
        }
    });

    function reset() {
        p1Score = 0;
        p1ScoreDisplay.textContent = p1Score;
        p1ScoreDisplay.classList.remove("winner");

        p2Score = 0;
        p2ScoreDisplay.textContent = p2Score;
        p2ScoreDisplay.classList.remove("winner");

        gameOver = false;

        inputValue.value = "";
    }

    resetButton.addEventListener("click", reset);

    inputValue.addEventListener("change", function () {
        winningScore = Number(this.value);
        displayWinningScore.textContent = this.value;
        reset();
    });

var gameParameters = {
    p1Score: 0,
    p2Score: 0,
    p1ScoreDisplay: document.querySelector("#h1p1Score"),
    p2ScoreDisplay: document.querySelector("#h1p2Score")
    .
    .
    .etc etc
}

var p1Button = document.querySelector("#P1");
var p2Button = document.querySelector("#P2");
var resetButton = document.querySelector("#Reset");

/*
var p1ScoreDisplay = document.querySelector("#h1p1Score");
var p2ScoreDisplay = document.querySelector("#h1p2Score");
*/
var p1ScoreDisplay = {
    scoreDisplay: document.querySelector("#h1p1Score")
};

var p2ScoreDisplay = {
    scoreDisplay: document.querySelector("#h1p2Score")
};
var inputValue = document.querySelector("#inputNum");
/*
var p1Score = 0;
var p2Score = 0;
*/

var p1Score = {
    score: 0
};

var p2Score = {
    score: 0
};

/*
var gameOver = false;
*/

var isGameOver = {
    gameOver: false
};

var winningScore = 5;
var displayWinningScore = document.querySelector("#winningScore");

/*function to increase the score of player 1 and player 2*/
function increment(scoreToIncrement,gameOverCheck,scoreToDisplay) {

    if (!gameOverCheck.gameOver) {

        scoreToIncrement.score++;

        if (scoreToIncrement.score === winningScore) {

            scoreToDisplay.scoreDisplay.classList.add("winner");
            console.log("Game Over!");
            gameOverCheck.gameOver = true;
        }

        scoreToDisplay.scoreDisplay.textContent = scoreToIncrement.score;
    }
}

p1Button.addEventListener("click", function () {

    increment(p1Score,isGameOver,p1ScoreDisplay);

    /*original code to increase the score of player 1
    if (!gameOver) {
    p1Score++;
    if (p1Score === winningScore) {
      console.log("Game Over!");
      p1ScoreDisplay.classList.add("winner");
      gameOver = true;
    }
    p1ScoreDisplay.textContent = p1Score;
  }
  */

});

p2Button.addEventListener("click", function () {
    increment(p2Score,isGameOver,p2ScoreDisplay);

    /*original code to increase the score of player 2
    if (!isGameOver.gameOver) {
        p2Score.score++;
        if (p2Score.score === winningScore) {
            console.log("Game Over!");
            p2ScoreDisplay.scoreDisplay.classList.add("winner");
            isGameOver.gameOver = true;
        }
        p2ScoreDisplay.scoreDisplay.textContent = p2Score.score;
    }
    */
});

function reset() {
    p1Score.score = 0;
    p1ScoreDisplay.scoreDisplay.textContent = p1Score.score;
    p1ScoreDisplay.scoreDisplay.classList.remove("winner");

    p2Score.score = 0;
    p2ScoreDisplay.scoreDisplay.textContent = p2Score.score;
    p2ScoreDisplay.scoreDisplay.classList.remove("winner");

    isGameOver.gameOver = false;

    inputValue.value = "";
}

resetButton.addEventListener("click", reset);

inputValue.addEventListener("change", function () {
    winningScore = Number(this.value);
    displayWinningScore.textContent = this.value;
    reset();
});