谁能向我解释为什么我的变量“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() {

  var i = 0;

  var t = 0;

  var c = 0;

  var sum = 0;

  var arrName = [];

  

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

  arrPrice.push(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;

}

编辑：我看到很多人评论说你sum每次都在设置。虽然更改此设置将使您的代码正常工作，但逻辑已被破坏。您的方法是创建一个数组并在每次调用时对其进行求和insert，而不是添加到运行总和中。我认为其他答案正在寻找快速修复方法，并且不介意破坏现有代码的逻辑。

Answer 2

sum每次插入新值时都会重置。每次尝试重新计算。无需循环

function insert() {

 

  let insertedName = document.getElementById("name").value;

  let insertedPrice = parseFloat(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 = insertedName;

  cell2.innerHTML = insertedPrice;

  

  const totalPrice = document.getElementById('totalprice');

  totalPrice.innerText = parseFloat(totalPrice.innerText || "0") + insertedPrice;

}

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 3

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