JavaScript-需要total input中所有行的总价之和，但它将这些值连接在一起，而不是相加

我想合计所有行的总价。但它不能添加值，它只是将这些值串联起来。以下是生成HTML的PHP：

$counter = 0;

foreach($db->getRecordSet($sqlTrRecord) as $row){$counter += 1; ?>
    <tr id="temTr" class="banktblhd">
      <td width="5"> <?php echo($counter); ?> </td>


      <td class="w10"> <input type="number" name="item_code" id="item_code" class="form-control" value="<?php echo($row['item_code']); ?>" readonly  /></td>
      <td class="w10"><input type="text" class="form-control" name="item_name" id="item_name" value="<?php echo($row['item_name']); ?>" readonly /> </td>
      <td class="w10"><input type="text" class="form-control" name="description" id="description" value="<?php echo($row['description']); ?>" readonly /></td>
      <td class="w10"><input type="number" class="form-control" name="availableQty" id="availableQty" value="<?php echo($row['quantity']); ?>" readonly  /></td>
      <td class="w10"><input type="number" class="form-control" name="p_cost" oninput="total(this);" id="p_cost" value="<?php echo($row['p_cost']); ?>" readonly /></td>
      <td class="w10">
        <input type="number" oninput="total(this);" class="form-control" name="quantity" id="quantity" autocomplete="off" /> </td>
      <td class="w10">
        <input type="number" oninput="total(this);" class="form-control" name="sale" id="sale" autocomplete="off" /> </td> 
      <td class="w10"><input type="number" oninput="total(this)" class="form-control" name="total_price" id="total_price" readonly />
      </td>
      <td class="w10" colspan="2"><input type="number" class="form-control"  name="total" id="total" readonly /></td>

---

您可以使用document.getElementByIdtotal.valueAsNumber，因为document.getElementByIdtotal.value作为字符串提供给您。首先，您需要从输入字段获取字符串。然后，您需要将字符串类型转换为整数，因为默认情况下它被视为字符串 解决方案：parseIntvalue

'let num=parseIntvalue`

之后，可以将num添加到任何数字。它将为您工作。

在您的代码中，您可以

document.getElementById("total").value += total;

这和

document.getElementById("total").value = document.getElementById("total").value + total;

现在document.getElementByIdtotal.value是一个文本值，因此第一个操作数是文本，第二个操作数转换为文本，这就是为什么会得到串联try 2+2和var a=2；控制台中的a+=2。所以你可以走了

document.getElementById("total").value = parseFloat(document.getElementById("total").value) + total;

但实际上我认为你需要

document.getElementById("total").value = parseFloat(document.getElementById("total").value) + total_price;

而且根本不需要创建另一个var总计，为什么需要它

事实上，我认为您需要的不是全部函数的最后3行[伙计，应该是getTotal，不要这样命名函数！]：

var total_price = parseFloat(unitRate.value * qty.value) + parseFloat(sale.value);
row.querySelector("input[name=total_price]").value = total_price;
var prevTotal = parseFloat(document.getElementById("total").value);
document.getElementById("total").value = prevTotal + total_price;

---

事实上，这似乎也不是一个好主意：目前，您的total函数是在输入时调用的，因此，当一个类型1、1添加到您的total时，当继续并键入10时，将再添加10，得到11。如果它们更改了值，则处理程序将添加新值，并保留以前的值。。每次你都要重新计算总数

请使用backtick包装器将代码格式化为代码。顺致敬意，

var total_price = parseFloat(unitRate.value * qty.value) + parseFloat(sale.value);
row.querySelector("input[name=total_price]").value = total_price;
var prevTotal = parseFloat(document.getElementById("total").value);
document.getElementById("total").value = prevTotal + total_price;