Почему элементы помещаются в массив несколько раз неожиданно, а не один раз?

Question

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

var checkBoxes = document.getElementsByClassName("checkbox");
var addSandwich = document.getElementById("add-sandwich");
var ingredients = [];
var ingredientsPrice = [];

function getIngredientsInfo() {
  //loop through check boxes

  for (let i = 0; i < checkBoxes.length; i++) {
    //add event listener to check boxes
    checkBoxes[i].addEventListener("change", function() {
      if (event.target.checked) {
        //push the name of ingredient to ingredients array
        ingredients.push(event.target.name);
        //push the ingredient price to ingredientsPrice array
        ingredientsPrice.push(event.target.value);
        console.log(ingredients, ingredientsPrice + " current array values");
      } 
    });
  }
}

function resetValues() {

  for (let x = 0; x < checkBoxes.length; x++) {
    checkBoxes[x].checked = false;
  }
  ingredients = [];
  ingredientsPrice = [];
}

getIngredientsInfo();

addSandwich.addEventListener("click", () => {
getIngredientsInfo();
resetValues();
});

<div class="checkbox-container">
  <p>Ingredients</p>
    <fieldset class="hidden">
        <legend>Choose your favourite ingredients</legend>

        <div class="checkbox-div">
            <input type="checkbox" class="checkbox" id="bacon" name="bacon"
                   value="1.00" />
            <label class="label" for="bacon">Bacon</label>
        </div>

        <div class="checkbox-div">
            <input type="checkbox" class="checkbox" id="beef" name="Beef"
                   value="1.50"/>
            <label class="label" for="beef">Beef</label>
        </div>

        <div class="checkbox-div">
            <input type="checkbox" class="checkbox" id="carrot" name="carrot"
                   value="0.50"/>
            <label class="label" for="carrot">Carrot</label>
        </div>

        <div class="checkbox-div">
            <input type="checkbox" class="checkbox" id="cucamber" name="cucamber"
                   value=".25"/>
            <label class="label" for="cucamber">Cucamber</label>
        </div>

        <div class="checkbox-div">
            <input type="checkbox" class="checkbox" id="duck" name="Duck"
                   value="1.75"/>
            <label class="label" for="duck">Duck</label>
        </div>

        <div class="checkbox-div">
            <input type="checkbox" class="checkbox" id="chicken" name="Grilled Chicken"
                   value="2.00"/>
            <label class="label" for="chicken">Grilled Chicken</label>
        </div>

        <div class="checkbox-div">
            <input type="checkbox" class="checkbox" id="ham" name="Ham"
                   value=".5"/>
            <label class="label" for="ham">Ham</label>
        </div>

        <div class="checkbox-div">
            <input type="checkbox" class="checkbox" id="lettuce" name="Lettuce"
                   value="0"/>
            <label class="label" for="lettuce">Lettuce</label>
        </div>

        <div class="checkbox-div">
            <input type="checkbox" class="checkbox" id="mushroom" name="Mushrooms"
                   value=".5"/>
            <label class="label" for="mushroom">Mushrooms</label>
        </div>

    

        <div class="checkbox-div">
            <input type="checkbox" class="checkbox" id="hard-boiled-egg" name="Hard Boiled Egg"
                   value=".5" />
            <label class="label" for="hard-boiled-egg">Hard Boiled Egg</label>
        </div>

    </fieldset>
    <div class="order-nav">
          <button type="submit" id="add-sandwich" class="btn pd-x-10" value="submit">Add Sandwich</button>
        </div> 
</div>

var arr = [];arr.push (aa, bb);<--- arr теперь имеют значения aa и bb, однако, если я начну новый заказ, каждый элемент будет добавлен дважды. Если я начну новый, после этого каждый элемент будет добавлен три раза, и он будет увеличиваться каждый раз </p>

Answer 1

С помощью addSandwich вы создаете новый прослушиватель событий для каждого флажка.

Просто удалите getIngredientsInfo();

addSandwich.addEventListener("click", () => {
    // getIngredientsInfo();
    resetValues();
});

var checkBoxes = document.getElementsByClassName("checkbox");
var addSandwich = document.getElementById("add-sandwich");
var ingredients = [];
var ingredientsPrice = [];

function getIngredientsInfo() {
  //loop through check boxes

  for (let i = 0; i < checkBoxes.length; i++) {
    //add event listener to check boxes
    checkBoxes[i].addEventListener("change", function() {
console.log(event.target.checked)
      if (event.target.checked) {
        //push the name of ingredient to ingredients array
        ingredients.push(event.target.name);
        //push the ingredient price to ingredientsPrice array
        ingredientsPrice.push(event.target.value);
        console.log(ingredients, ingredientsPrice + " current array values");
      } 
    });
  }
}

function resetValues() {

  for (let x = 0; x < checkBoxes.length; x++) {
    checkBoxes[x].checked = false;
  }
  ingredients = [];
  ingredientsPrice = [];
}

getIngredientsInfo();

addSandwich.addEventListener("click", () => {
//    getIngredientsInfo();
resetValues();
});

<div class="checkbox-container">
  <p>Ingredients</p>
    <fieldset class="hidden">
        <legend>Choose your favourite ingredients</legend>

        <div class="checkbox-div">
            <input type="checkbox" class="checkbox" id="bacon" name="bacon"
                   value="1.00" />
            <label class="label" for="bacon">Bacon</label>
        </div>

        <div class="checkbox-div">
            <input type="checkbox" class="checkbox" id="beef" name="Beef"
                   value="1.50"/>
            <label class="label" for="beef">Beef</label>
        </div>

        <div class="checkbox-div">
            <input type="checkbox" class="checkbox" id="carrot" name="carrot"
                   value="0.50"/>
            <label class="label" for="carrot">Carrot</label>
        </div>

        <div class="checkbox-div">
            <input type="checkbox" class="checkbox" id="cucamber" name="cucamber"
                   value=".25"/>
            <label class="label" for="cucamber">Cucamber</label>
        </div>

        <div class="checkbox-div">
            <input type="checkbox" class="checkbox" id="duck" name="Duck"
                   value="1.75"/>
            <label class="label" for="duck">Duck</label>
        </div>

        <div class="checkbox-div">
            <input type="checkbox" class="checkbox" id="chicken" name="Grilled Chicken"
                   value="2.00"/>
            <label class="label" for="chicken">Grilled Chicken</label>
        </div>

        <div class="checkbox-div">
            <input type="checkbox" class="checkbox" id="ham" name="Ham"
                   value=".5"/>
            <label class="label" for="ham">Ham</label>
        </div>

        <div class="checkbox-div">
            <input type="checkbox" class="checkbox" id="lettuce" name="Lettuce"
                   value="0"/>
            <label class="label" for="lettuce">Lettuce</label>
        </div>

        <div class="checkbox-div">
            <input type="checkbox" class="checkbox" id="mushroom" name="Mushrooms"
                   value=".5"/>
            <label class="label" for="mushroom">Mushrooms</label>
        </div>

    

        <div class="checkbox-div">
            <input type="checkbox" class="checkbox" id="hard-boiled-egg" name="Hard Boiled Egg"
                   value=".5" />
            <label class="label" for="hard-boiled-egg">Hard Boiled Egg</label>
        </div>

    </fieldset>
    <div class="order-nav">
          <button type="submit" id="add-sandwich" class="btn pd-x-10" value="submit">Add Sandwich</button>
        </div> 
</div>

Answer 2

Вы добавляете прослушиватель событий для каждого нажатия на addSandwich, в результате чего функция вызывается несколько раз.Что вам нужно сделать, это не звонить getIngredientsInfo() в прослушиватель кликов для addSandwitch.Изменить addSandwich.addEventListener("click", () => { getIngredientsInfo(); resetValues(); }); на addSandwich.addEventListener("click", () => { resetValues(); });