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

Question

因此，我在Udemy上进行了一项练习，要求我创建一个成绩管理器应用程序。

“玩到：5”表示获胜分数
输入字段更改获胜分数
播放器1按钮增加左侧的分数。 当达到获胜分数时，该值将变为绿色，并且游戏结束。
播放器2按钮增加右侧的分数。 当达到获胜分数时，该值将变为绿色，并且游戏结束。
重置按钮重置游戏，并且两个玩家都从0开始。
如果在比赛中途更改获胜得分（即得分不为0），则得分将重置为0，并且“ playing to：”值将根据在输入字段中键入的值而改变。

问题：我创建了一个函数声明（称为incremenet（）），该函数声明可以执行增加玩家1和玩家2得分的类似任务。它接受1个参数，这将是玩家的得分（p1Score或p2Score）。

我在播放器1上尝试了此功能，但总分未超过1！

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

最重要的是，我注意到当p1Score达到获胜分数时也会发生错误。 为了使分数增加到1以上，我在事件侦听器中将“ p1Score ++”放在了invoke（）函数调用之前。 它将声明“ scoreToIncrement.classList”未定义。 这应该在分数中添加“ .winner”类。 我相信这也与范围界定或提升有关。

我的理解是，由于此增量函数嵌套在事件侦听器匿名函数中，因此增量函数仍应能够调用我在开始时声明的全局变量，并在函数执行后相应地对其进行更新。 但是我想我的理解不是100％就在这里。

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Score Keeper</title>

        <style>
        .winner {
            color: green;
        }

        </style>

    <body>
    <h1><span id="h1p1Score">0</span> to <span id="h1p2Score">0</span></h1>
        <p>Playing to: <span id="winningScore">5</span></p>
        <input type="number" id="inputNum" placeholder="enter max playing number">
        <button id="P1">Player One</button>
        <button id="P2">Player Two</button>
        <button id="Reset">Reset</button>
        <script src="scoreKeeper.js"></script>
    </body>
</html>

以下是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 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();
    });

Answer 1

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

我之所以不能最初更改数字变量的原因是由于所谓的“共享呼叫”。 它涉及通过值传递数字（原始数据类型）和通过引用传递对象或数组（非原始数据类型）。 请参阅下面的链接以获取良好的解释。 如果没有，您可以随时通过Google搜索或Wiki搜索“通过共享javascript进行调用”

https://medium.com/@arunk.s/javascript-and-call-by-sharing-71b30e960fd4

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

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();
});

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

问题描述

1 个解决方案

解决方案1
0 2018-04-16 08:18:36

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

问题描述

1 个解决方案

解决方案1 0 2018-04-16 08:18:36

解决方案1
0 2018-04-16 08:18:36