Не удается очистить массив Javascript при вызове функции - PullRequest
Новая
       4

Не удается очистить массив Javascript при вызове функции

0 голосов
/ 15 апреля 2020

Я строю простую игру в кости.

У меня есть 2 массива, которые представляют счет каждого игрока и компьютера.

Каждый раз, когда я нажимаю функцию reRoll (), я очищаю все мои дополнительные элементы, представляющие кости, и я пытаюсь очистить массив, потому что я хочу, чтобы массивы очков были пустыми, прежде чем выдвигать новые оценки для новой игры.

У меня есть несколько различных функций, основной из которых является Функция кости, которая генерирует кости и генерирует для них 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:)

1 Ответ

1 голос
/ 15 апреля 2020

Вы не очищаете, сверху, объявленные массивы.
С этим фрагментом: 

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

Вы просто объявляете два новых массива с тем же именем, но в пределах вашей области действия сейчас .
Просто удалите var и все будет в порядке: 

playerScore = [];
compScore = [];
...