JavaScript实现支出计算器删除历史项不更新总金额如何解决

问题原因 #

当前代码仅在新增收入/支出条目时更新总金额，删除条目的逻辑中仅做了DOM节点移除，没有同步扣减对应条目的金额、更新总金额的展示，因此删除条目后总金额不会变动。

修复方案 #

• 新增条目时将对应金额存入条目的自定义属性，方便删除时读取
• 双击删除的回调逻辑中，先完成总金额的扣减与展示更新，再移除DOM节点

修复后完整代码 #

<body>
<h1>Expense Tracker</h1>
<div class="container">
    <p>Total : <span id="total"></span></p>
    <input id="inputField" type="number"><button id="addToDo">+</button>
    <div class="to-dos" id="toDoContainer">
    </div>
</div>

<script>
  let totalspan = document.getElementById('total');
  let addToDoButton = document.getElementById('addToDo');
  let toDoContainer = document.getElementById('toDoContainer');
  let inputField = document.getElementById('inputField');
  var total = 0

  addToDoButton.addEventListener('click', function(){
      // 拦截空输入提交
      if(!inputField.value) return
      var paragraph = document.createElement('p');
      paragraph.classList.add('paragraph-styling');
      const amount = parseInt(inputField.value)
      // 存储当前条目金额到自定义属性，供删除时使用
      paragraph.dataset.amount = amount
      if (amount > 0){
        paragraph.innerText = amount;
        total += amount
      } else if (amount < 0){
        paragraph.innerText = amount;
        total += amount
      }
      totalspan.innerText = total
      toDoContainer.appendChild(paragraph);
      inputField.value = "";
      paragraph.addEventListener('dblclick', function(){
        // 扣减对应条目的金额
        total -= parseInt(this.dataset.amount)
        // 更新总金额展示
        totalspan.innerText = total
        // 移除条目节点
        toDoContainer.removeChild(paragraph);
      })
  })
</script>
</body>

内容的提问来源于stack exchange，提问作者tallcoder