调用函数时不能清空Javascript数组答案

【问题标题】：Can't empty Javascript array when calling function调用函数时不能清空Javascript数组
【发布时间】：2020-07-28 17:34:30
【问题描述】：

我正在构建一个简单的骰子游戏。

我有 2 个数组代表每个玩家和计算机得分。

每次按下“reRoll()”函数时，我都会清除所有附加的表示骰子的 div，并且我正在尝试清除数组，因为我希望分数数组在为新游戏推送新分数之前为空。

我有几个不同的函数，主要的是一个骰子函数，它生成骰子并为它们生成 html 元素。然后我的按钮有一个包装函数，它调用骰子 2 次（我这样做是为了为每个玩家掷骰子 2 次。如果有比创建一个包装函数来调用另一个函数 2 次更好的解决方案，请赐教）。单击包装器后，我隐藏按钮并用新按钮“reRoll()”替换它，如前所述，它清除子骰子 div 并允许我再次玩。

我遇到的唯一问题是每次按“reRoll()”时，数组都不会清除，并且骰子分数会添加到数组中。

我假设数组不会清除，因为它在本地范围内，而我要推送的真正数组位于全局范围内。

这里是代码片段...

var playerScore = [];
      var compScore = [];

      function wrapper() {
        dice();
        dice();
        document.getElementById("rollBtn").style.display = "none";
        document.getElementById("reRollBtn").style.visibility = "visible";
        console.log(playerScore);
        console.log(compScore);
      }

      

      function reRoll() {
        var playerScore = [];
        var compScore = [];
        console.log(playerScore);
        document.getElementById("playerRow").innerHTML = "";
        document.getElementById("compRow").innerHTML = "";
        wrapper();
      }

      function dice() {
        let compRoll = 1 + Math.floor(Math.random() * Math.floor(7));
        var dDiceDiv = document.getElementById("compRow");
        let newDRoll = document.createElement("div");
        newDRoll.innerHTML = compRoll;
        dDiceDiv.appendChild(newDRoll);
        newDRoll.setAttribute("id", "compDice");
        compScore.push(compRoll);

        let playerRoll = 1 + Math.floor(Math.random() * Math.floor(7));
        var pDiceDiv = document.getElementById("playerRow");
        let newPRoll = document.createElement("div");
        newPRoll.innerHTML = playerRoll;
        pDiceDiv.appendChild(newPRoll);
        newPRoll.setAttribute("id", "playerDice");
        playerScore.push(playerRoll);

        var playerSum = playerScore.reduce(function (a, b) {
          return a + b;
        }, 0);

        var compSum = compScore.reduce(function (a, b) {
          return a + b;
        }, 0);

        console.log(playerSum);
        console.log(compSum);

        document.getElementById("playerScore").innerHTML = playerSum;
        document.getElementById("compScore").innerHTML = compSum;
      }

#playerRow,
      #compRow {
        flex: 1;
        justify-content: space-evenly;
        text-align: center;
      }

      #playerDice,
      #compDice {
        background-color: white;
        width: 50px;
        height: 50px;
        margin: 10px;
        padding-top: 5px;
      }

<body>
    <div
      class="container"
      style="
        width: 50%;
        background-color: lightslategray;
        margin: auto;
        text-align: center;
        padding: 20px;
      "
    >
      <h3 id="compScore"></h3>
      <div id="compRow" style="display: flex;"></div>
      <div id="playerRow" style="display: flex;"></div>
      <h3 id="playerScore"></h3>
      <button onclick="wrapper();" id="rollBtn">Roll Dice</button>
      <button onclick="reRoll();" id="reRollBtn" style="visibility: hidden;">
        Re-Roll
      </button>
    </div>
  </body>

请原谅我平庸的编程能力。我仍在学习 javascript，如果有人可以帮助解决我的问题并在哪里出错，我会很高兴。我有一种感觉，我可以将它设置得更干净，而不会遇到这样的问题。

PS：请只使用纯JS。我正在学习 JS，没有 Jquery :)

【问题讨论】：

标签： javascript arrays dom scope

【解决方案1】：

您没有清除顶部声明的数组。
有了这个 sn-p：

var playerScore = [];
var compScore = [];

您只是声明了两个具有相同名称但现在在您的范围内的新数组。
只需删除 var 就可以了：

playerScore = [];
compScore = [];

【讨论】：