谁能向我解释为什么我的变量“sum”没有计算数组“arrPrice”的总和？

Question

arrPrice我想查看表格最后一个单元格中数组中值的总和。但该sum变量只是保留我插入表中的最后一个值。有人可以向我解释为什么会发生这样的事情吗？我创建表行的风格有问题吗？

function insert() {

  var i = 0;

  var t = 0;

  var c = 0;

  var sum = 0;

  var arrName = [];

  var arrPrice = [];

  

  arrName[i] = document.getElementById("name").value;

  arrPrice[i] = document.getElementById("price").value;

  var table = document.getElementById("tabl3");

  var row = table.insertRow(1);

  var cell1 = row.insertCell(0);

  var cell2 = row.insertCell(1);

  cell1.innerHTML = arrName[i];

  cell2.innerHTML = arrPrice[i];

  i++;

  while (t < arrPrice.length) {

    arrPrice[t] = arrPrice[t] * 1;

    sum = sum + arrPrice[t];

    t++;

  }

  document.getElementById("totalprice").innerHTML = sum;

}

table,

th,

td {

  border: 1px solid black;

  border-spacing: 0px;

  width: 150px

}

Name: <input type="text" id="name"><br> Price: <input type="number" id="price"><br>

<button id="ins" onclick="insert()">Insert</button>

<p>&nbsp;</p>

<table id="tabl3">

  <tr>

    <td>Item</td>

    <td>Price</td>

  </tr>

  <tr>

    <td>Total</td>

    <td id="totalprice"></td>

  </tr>

</table>

Answer 1

您将重置arrPrice每次运行，这会将其设置为最新的元素。一种解决方案是使数组成为全局数组并在函数调用中附加到它：var arrPrice = [];function insert() {&nbsp; var i = 0;&nbsp; var t = 0;&nbsp; var c = 0;&nbsp; var sum = 0;&nbsp; var arrName = [];&nbsp;&nbsp;&nbsp; arrName[i] = document.getElementById("name").value;&nbsp; arrPrice.push(document.getElementById("price").value);&nbsp; var table = document.getElementById("tabl3");&nbsp; var row = table.insertRow(1);&nbsp; var cell1 = row.insertCell(0);&nbsp; var cell2 = row.insertCell(1);&nbsp; cell1.innerHTML = arrName[i];&nbsp; cell2.innerHTML = arrPrice[i];&nbsp; i++;&nbsp; while (t < arrPrice.length) {&nbsp; &nbsp; arrPrice[t] = arrPrice[t] * 1;&nbsp; &nbsp; sum = sum + arrPrice[t];&nbsp; &nbsp; t++;&nbsp; }&nbsp; document.getElementById("totalprice").innerHTML = sum;}编辑：我看到很多人评论说你sum每次都在设置。虽然更改此设置将使您的代码正常工作，但逻辑已被破坏。您的方法是创建一个数组并在每次调用时对其进行求和insert，而不是添加到运行总和中。我认为其他答案正在寻找快速修复方法，并且不介意破坏现有代码的逻辑。

Answer 2

sum每次插入新值时都会重置。每次尝试重新计算。无需循环function insert() {&nbsp;&nbsp; let insertedName = document.getElementById("name").value;&nbsp; let insertedPrice = parseFloat(document.getElementById("price").value);&nbsp; var table = document.getElementById("tabl3");&nbsp; var row = table.insertRow(1);&nbsp; var cell1 = row.insertCell(0);&nbsp; var cell2 = row.insertCell(1);&nbsp; cell1.innerHTML = insertedName;&nbsp; cell2.innerHTML = insertedPrice;&nbsp;&nbsp;&nbsp; const totalPrice = document.getElementById('totalprice');&nbsp; totalPrice.innerText = parseFloat(totalPrice.innerText || "0") + insertedPrice;}table,th,td {&nbsp; border: 1px solid black;&nbsp; border-spacing: 0px;&nbsp; width: 150px}Name: <input type="text" id="name"><br> Price: <input type="number" id="price"><br><button id="ins" onclick="insert()">Insert</button><p>&nbsp;</p><table id="tabl3">&nbsp; <tr>&nbsp; &nbsp; <td>Item</td>&nbsp; &nbsp; <td>Price</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>Total</td>&nbsp; &nbsp; <td id="totalprice"></td>&nbsp; </tr></table>

Answer 3

在你的函数中你所做的sum = 0。所以每次当你调用你的函数时，你的总和就会变成0。要解决这个问题，只需使你的sum全局。只需将其放在您的函数之外即可。