javascript - 计算多个字段的值并在 Javascript 中显示每一行

Question

我有一张发票，它不是表格，而是在 html 的 div 中有一些输入字段。这些字段是通过单击按钮动态创建的。

<li><input type="text" id="cost[]" name="unit[]" value="<?php echo $val->unit ; ?>"> </li>
<li><input type="text" id="qty[]" name="rate[]" value="<?php echo $val->rate ; ?>"> </li>
<li><input type="text" id="price[]" name="total[]" value="<?php echo $val->total ; ?>"> </li>

现在我想将单位乘以比率并将其显示在总计字段中。

我的Javascript是

 window.onkeyup=function() {

        var str = document.getElementById("cost[]").value;
        var str1 = document.getElementById("qty[]").value;
        var price = parseFloat(str*str1);
        document.getElementById("price[]").value = price;
}

上面的 javascript 工作正常，但它只适用于第一行。对于第一行下方的其余行，它不起作用。我想要所有行的计算。我已经看到了一些答案，但它们都不适用于我的情况。

欢迎任何帮助。

Answer 1

我从您的代码中观察到您可能对多个项目使用相同的 ID。

“id”属性为元素指定一个名称。此名称在文档中必须是唯一的。

尽管我们有类似的解决方法:

document.querySelectorAll("[id='someID']");

要选择具有相同“id”的所有元素，您的 HTML 将无效。

这就是为什么我们用“类”代替。类是一组元素。

虽然我使用了“name”属性。

可能是您正在寻找的:

 window.onkeyup=function() {
	
var items = document.querySelectorAll(".item");
var itemsArray = Array.prototype.slice.call(items,0);
var unit, rate, total, net = 0;
itemsArray.forEach(function(el){
	unit = el.querySelector('input[name="unit[]"]').value;
	rate = el.querySelector('input[name="rate[]"]').value;
	total = unit * rate;
	el.querySelector('input[name="total[]"]').value = total;
	net+=total;
});
document.getElementById('net').value=net;
}

<div class='item'>
	<li><input type="text"  name="unit[]" value=""> </li>
	<li><input type="text"  name="rate[]" value=""> </li>
	<li><input type="text" name="total[]" value=""> </li>
</div>

<br><br>

<div class='item'>
	<li><input type="text" name="unit[]" value=""> </li>
	<li><input type="text" name="rate[]" value=""> </li>
	<li><input type="text" name="total[]" value=""> </li>
</div>

</br></br>

<li><input id='net' type="text" name="net[]" value=""> </li>