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

Question

I have a couple of checkboxes that are attached to an event and when clicked two values are being pushed to the ingredients and ingredientsPrice array respectively. When I run it the first time the program seems to work fine however as I start a new order although the values are being reset somehow each item is being repetitively added. I have noticed a pattern of the repetitive process that after each order every item is added for another one time like there is a loop. Small example below:

 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 have value of aa and bb now however if I start a new order each item will be added twice.If I start another one after that each item is added three times and it keeps increasing every time

Answer 1

By addSandwich , you create a new event listener for every checkbox.

Just delete 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

You are adding an event listener for every click on addSandwich which results in the function being called multiple times. What you need to do is don;t call getIngredientsInfo() in the click listener for addSandwitch . Change addSandwich.addEventListener("click", () => { getIngredientsInfo(); resetValues(); }); to addSandwich.addEventListener("click", () => { resetValues(); });