时间戳

首页 > 解决方案 > 为什么这个函数会执行多次？

javascript - 为什么这个函数会执行多次？

问题描述

我正在制作一个简单的预算计划，当我删除列表中的项目时，我在刷新剩余预算时遇到了一些麻烦。函数budgetDeleteItem 执行了很多次，我不知道为什么。也许它与它在 for 循环中存在有关，但我不知道如何将它从那里取出并仍然使其工作。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
<h1>Budget for the week</h1>
<form>

  <input id= "itemName" type="text" name="itemName" value="" placeholder="name of the item" >
  <input id = "itemCost" type="text" name="itemCost" value="" placeholder="cost of the item">

</form>
<button type="button" name="button"> Add new item </button>

   <ul>

   </ul>

  <p>total budget: <span id= "budget"> 100 </span> </p>

  </body>

  <script type="text/javascript">

const button= document.querySelector("button");
const ul= document.querySelector("ul");

button.addEventListener("click", checkEntry )

function checkEntry() {
  const itemName = document.getElementById("itemName").value;
  const itemCost = document.getElementById("itemCost").value;
  addItem(itemName, itemCost);
}

function addItem(itemName, itemCost){
  const li = document.createElement('li');
  li.innerHTML = ` <span class= "itemName">${itemName} </span>
    $ <span class=itemCost> ${itemCost} </span>
    <span class="delete"> X </span> `;
  ul.appendChild(li);
  deleteItem();
  budgetAddItem(itemCost);
}

function deleteItem(){
  const deleteButton = document.querySelectorAll(".delete");
  for (let i = 0; i < deleteButton.length; i++) {
    deleteButton[i].addEventListener("click", function(e) {
      if (e.target.classList.contains("delete")) {
        e.target.parentElement.remove();
        budgetDeleteItem(e);
      }
    })
 }
}
// Refreshes the remain budget whenever you add an Item
function budgetAddItem(itemCost){
const budgetContent = document.getElementById("budget").textContent;
const budgetContentParsed = parseInt(budgetContent);
const oldBudget = document.getElementById("budget");
const itemCostParsed = parseInt(itemCost);
const newBudget = budgetContentParsed - itemCostParsed;
oldBudget.innerHTML =`${newBudget}`;
}

// Refreshes the remain budget whenever you delete an Item
function budgetDeleteItem (e) {
const oldBudget = document.getElementById("budget");
const budgetContent = document.getElementById("budget").textContent;
const budgetContentParsed = parseInt(budgetContent);
const itemCost= e.target.parentElement.querySelector(".itemCost").textContent;
const itemCostParsed = parseInt(itemCost);
const newBudget = budgetContentParsed + itemCostParsed;
oldBudget.innerHTML =`${newBudget}`;
}




  </script>




</html>

标签： javascriptdomaddeventlistener

解决方案

如评论中所述，您正在创建重复的绑定。一种可能的方法是提供一种方法来限制要添加新绑定的元素。考虑...

<span class="delete new"> X </span>

如果您使用两个类创建元素，那么您有一个指示符来知道哪些是新的。然后...

const deleteButton = document.querySelectorAll(".delete.new");

选择两个类以仅获取新类。最后...

deleteButton[i].classList.remove('new');

删除新类，以防止它在未来被选中。

推荐阅读