JavaScript - 需要总输入中所有行的总价，但它将值连接在一起而不是将它们相加

Question

我想对所有行的总价求和。 但它不能添加它只是连接值的值。 这是生成 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>

这是我的 JavaScript：

function total(element) {
    var row = element.closest("tr");
    var unitRate = row.querySelector("input[name=p_cost]");
    var qty = row.querySelector("input[name=quantity]");
    var sale = row.querySelector("input[name=sale]");

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

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

Answer 1

首先，您需要从输入字段中获取一个字符串。 然后您需要将字符串类型转换为整数，因为默认情况下它被视为字符串解决方案： parseInt(value)

'let num = parseInt(value)`

之后 num 可以添加到任何数字。 它会为你工作。

Answer 2

你可以使用document.getElementById("total").valueAsNumber因为document.getElementById("total").value给你作为字符串

Answer 3

在你的代码中，你去

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

这与

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

现在document.getElementById("total").value是一个文本值，所以第一个操作数是文本，第二个操作数被转换为文本，这就是为什么你得到连接（尝试"2"+2和var a = "2"; a+=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 ( total )（为什么需要它？）

事实上，我认为你需要（而不是total函数的最后 3 行 [man，它应该是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 添加到你的总数中时，当继续输入10 ，将添加 10个，给你11 . 如果他们更改了值，您的处理程序将添加新值并保留以前的值。您每次都必须重新计算总数！