Почему эта функция выполняется много раз? - PullRequest
Новая
       12

Почему эта функция выполняется много раз?

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

Я делаю простую бюджетную программу и у меня возникают проблемы с обновлением оставшегося бюджета при удалении элементов в списке. Функция budgetDeleteItem выполняется много раз, и я не знаю почему. Может быть, это как-то связано с тем, что он находится внутри для l oop, но я не знаю, как вытащить его оттуда и заставить его работать. 

<!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>

1 Ответ

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

Как уже упоминалось в комментариях, вы создаете дубликаты привязок. Один из возможных способов сделать это - предоставить способ ограничения элементов, к которым вы добавляете новые привязки. Подумайте ... 

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

Если вы создаете свои элементы с двумя классами, то у вас есть индикатор, чтобы узнать, какие из них являются новыми. Тогда ... 

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

Выберите по обоим классам, чтобы получить только новые. Наконец ... 

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

Чтобы удалить новый класс, чтобы он не был выбран в будущем.

...