Question

我有几个与事件关联的复选框，当单击时，两个值分别被推入Ingredients和IngredientsPrice数组。第一次运行该程序时，尽管我以某种方式重置了值，但每次重复地添加每个项目，但该程序似乎都能正常运行。我注意到重复过程的一种模式，在每个订单之后，每个项目又添加一次，就像有一个循环一样。下面的小例子：

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的值，但是，如果我开始新订单，则每个项目都会被添加两次。如果我再启动一个新订单，则每个项目都会被添加三次，并且每次都会不断增加

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

为什么将项目意外地多次而不是一次地推入数组？

2 个答案: