使用javascript删除数据功能只能使用一次

Question

JS的新功能。下面的代码可以很好地使用捐赠按钮来汇总捐赠总额，但是为什么 remove 按钮只更新一次 totaldonation 值。那么它只会删除该行而不更新 totaldonation 值。一直到处寻找答案，确实需要一些帮助。谢谢

代码

var totaldonation = 0;
var totalprice = 0;
var x = document.getElementById("totaldonation");

function addHtmlTableRow(ele) {
  var newRow = table.insertRow(table.length);

  var elitem = ele.closest('.item');
  var quantity = elitem.querySelector(".quantity").value;
  var itemprice = elitem.querySelector(".itemprice").value;
  var itemname = elitem.querySelector('.itemname').value;
  totalprice = itemprice * quantity;

  cell1 = newRow.insertCell(0);
  cell2 = newRow.insertCell(1);
  cell3 = newRow.insertCell(2);
  cell4 = newRow.insertCell(3);

  cell1.innerHTML = itemname;
  cell2.innerHTML = quantity;
  cell3.innerHTML = itemprice;
  cell4.innerHTML = totalprice;

  totaldonation = totaldonation + totalprice;

  var removeBtn = document.createElement("input");
  removeBtn.type = "button";
  removeBtn.setAttribute('value', 'Remove');
  removeBtn.setAttribute('class', 'removeBtn');
  removeBtn.setAttribute('id', 'removeBtn');
  removeBtn.setAttribute('onclick', 'deleteData(this,totaldonation,totalprice)');
  cell4.appendChild(removeBtn);

  x.innerHTML = totaldonation;
}

function deleteData(btn, totaldonation, totalprice) {
  totaldonation = totaldonation - totalprice;
  x.innerHTML = totaldonation;
  $(btn).closest('tr').remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item active">
  <img src="item/dapur.png" class="img-responsive" style="height:120px;">
  <input class="input-display itemname" type="text" id="itemname1" value="Dapur" readonly>
  <b><input class="input-display itemprice" type="text" id="itemprice1" 
    value="30" readonly></b>
  <input class="form-control quantity" type="number" id="quantity1">
  <button class="btn default" value="1" onclick="addHtmlTableRow(this);">Donate</button>
</div>

<div class="item">
  <img src="item/dapur.png" class="img-responsive" style="height:120px;">
  <input class="input-display itemname" type="text" id="itemname2" value="Dapur" readonly>
  <b><input class="input-display itemprice" type="text" id="itemprice2" 
     value="10" readonly></b>
  <input class="form-control quantity" type="number" id="quantity2">
  <button class="btn default" value="2" onclick="addHtmlTableRow(this);">Donate</button>
</div>

<div class="item">
  <img src="item/dapur.png" class="img-responsive" style="height:120px;">
  <input class="input-display itemname" type="text" id="itemname3" value="Dapur" readonly>
  <b><input class="input-display itemprice" type="text" id="itemprice3" 
    value="20" readonly></b>
  <input class="form-control quantity" type="number" id="quantity3">
  <button class="btn default" value="3" onclick="addHtmlTableRow(this);">Donate</button>
</div>


<table class="table" id="table">
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantity</th>
      <th>Price per unit</th>
      <th>Total price Item</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<div id="totaldonation"></div>

Answer 1

您正在将全局变量totaldonation和totalprice的值传递给deleteData()函数。 totalprice始终包含您上次捐款的金额，而不是您要删除的行的捐款。

此外，由于您使用totaldonation作为函数参数，因此您在分配局部变量时将更新局部变量，而不是全局变量。您需要了解变量范围（并且应该将所有临时变量（例如cell1声明为局部变量）。

deleteData()最好从当前表行中减去要减去的数量，而不是函数参数。

var totaldonation = 0;
var x = document.getElementById("totaldonation");

function addHtmlTableRow(ele) {
  var newRow = table.insertRow(table.length);

  var elitem = ele.closest('.item');
  var quantity = elitem.querySelector(".quantity").value;
  var itemprice = elitem.querySelector(".itemprice").value;
  var itemname = elitem.querySelector('.itemname').value;
  var totalprice = itemprice * quantity;

  var cell1 = newRow.insertCell(0);
  var cell2 = newRow.insertCell(1);
  var cell3 = newRow.insertCell(2);
  var cell4 = newRow.insertCell(3);

  cell1.innerHTML = itemname;
  cell2.innerHTML = quantity;
  cell3.innerHTML = itemprice;
  cell4.innerHTML = totalprice;

  totaldonation = totaldonation + totalprice;

  var removeBtn = document.createElement("input");
  removeBtn.type = "button";
  removeBtn.setAttribute('value', 'Remove');
  removeBtn.setAttribute('class', 'removeBtn');
  removeBtn.setAttribute('id', 'removeBtn');
  removeBtn.setAttribute('onclick', 'deleteData(this)');
  cell4.appendChild(removeBtn);

  x.innerHTML = totaldonation;
}

function deleteData(btn) {
  let totalprice = parseInt($(btn).closest("tr").find("td:nth-child(4)").html());
  totaldonation = totaldonation - totalprice;
  x.innerHTML = totaldonation;
  $(btn).closest('tr').remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item active">
  <img src="item/dapur.png" class="img-responsive" style="height:120px;">
  <input class="input-display itemname" type="text" id="itemname1" value="Dapur" readonly>
  <b><input class="input-display itemprice" type="text" id="itemprice1" 
    value="30" readonly></b>
  <input class="form-control quantity" type="number" id="quantity1">
  <button class="btn default" value="1" onclick="addHtmlTableRow(this);">Donate</button>
</div>

<div class="item">
  <img src="item/dapur.png" class="img-responsive" style="height:120px;">
  <input class="input-display itemname" type="text" id="itemname2" value="Dapur" readonly>
  <b><input class="input-display itemprice" type="text" id="itemprice2" 
     value="10" readonly></b>
  <input class="form-control quantity" type="number" id="quantity2">
  <button class="btn default" value="2" onclick="addHtmlTableRow(this);">Donate</button>
</div>

<div class="item">
  <img src="item/dapur.png" class="img-responsive" style="height:120px;">
  <input class="input-display itemname" type="text" id="itemname3" value="Dapur" readonly>
  <b><input class="input-display itemprice" type="text" id="itemprice3" 
    value="20" readonly></b>
  <input class="form-control quantity" type="number" id="quantity3">
  <button class="btn default" value="3" onclick="addHtmlTableRow(this);">Donate</button>
</div>


<table class="table" id="table">
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantity</th>
      <th>Price per unit</th>
      <th>Total price Item</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<div id="totaldonation"></div>