如何使用Javascript获取输入值的总和?
Posted
技术标签:
【中文标题】如何使用Javascript获取输入值的总和?【英文标题】:How to get sum of input values using Javascript? 【发布时间】:2022-01-24 05:14:34 【问题描述】:我在 javascript 中并不完美...我想在不刷新页面的下一个名为 sub total 的字段中显示金额输入框中显示的值的总和。我正在尝试但无法成功。谁能帮我弄清楚....? 谢谢.. n 个数字之和的 Javascript 代码。
function Mul(index)
var quantity = document.getElementsByClassName("quantity")[index].value;
var price = document.getElementsByClassName("price")[index].value;
document.getElementsByClassName("amount")[index].value = quantity * price;
const subTotalField = document.getElementById("subTotal");
subTotalField.innerhtml = parseInt(subTotalField.innerHTML) + quantity * price;
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('0')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('0')">
</td>
<td>
<input type="text" id="amount-0" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="text" id="amount-1" class="amount form-control"
disabled>
</td>
</tr>
</tbody>
</table>
<table class="table table-stripped table-center table-hover">
<thead></thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-end">Sub Total</td>
<td class="text-end" id="subTotal">0</td>
</tr>
</tbody>
</table>
【问题讨论】:
这能回答你的问题吗? jQuery sum of input values in sections 对我来说,你的 sn-p 工作。您需要在数量和单价字段中输入值。 【参考方案1】:每次使用新值添加小计时。
例如:您输入数量 10 和单价 1 然后数量为 10 ,这是您第一次在小计中没有任何值,因此您将在 parseInt(subTotalField.innerHTML) 值中得到 0。
subTotalField.innerHTML = parseInt(subTotalField.innerHTML) + 数量 * 价格;
subTotalField.innerHTML = 0 + 10*1
subTotalField.innerHTML = 10
但是当您在数量字段中将值从 10 更改为 20 时,这一次您在 subTotalField.innerHTML 中有值
所以现在是
subTotalField.innerHTML = parseInt(subTotalField.innerHTML) + 数量 * 价格;
subTotalField.innerHTML = 10 + 20*1
subTotalField.innerHTML = 30
您期望它为 20,但代码返回 30
所以要解决这个问题,你应该用这个替换 mul 函数
function mul(index)
var quantity = document.getElementsByClassName("quantity")[index].value;
var price = document.getElementsByClassName("price")[index].value;
document.getElementsByClassName("amount")[index].value = quantity * price;
const subTotalField = document.getElementById("subTotal");
var finalAmount = 0;
Array.from(document.getElementsByClassName("amount")).forEach(ele=>
if(ele.value)
finalAmount = finalAmount + ele.value
)
subTotalField.innerHTML = finalAmount;
【讨论】:
【参考方案2】:function Mul(index)
var quantity = document.getElementsByClassName("quantity")[index].value;
var price = document.getElementsByClassName("price")[index].value;
document.getElementsByClassName("amount")[index].value = quantity * price;
const subTotalField = document.getElementById("subTotal");
subTotalField.innerHTML = Array.from(document.getElementsByClassName("amount")).reduce((sum, element) =>
if (element.value.length === 0) return sum;
return sum + parseInt(element.value);
, 0)
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control" onkeyup="Mul('0')">
</td>
<td>
<input type="number" id="" class="price form-control" onkeyup="Mul('0')">
</td>
<td>
<input type="text" id="amount-0" class="amount form-control" disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control" onkeyup="Mul('1')">
</td>
<td>
<input type="number" id="" class="price form-control" onkeyup="Mul('1')">
</td>
<td>
<input type="text" id="amount-1" class="amount form-control" disabled>
</td>
</tr>
</tbody>
</table>
<table class="table table-stripped table-center table-hover">
<thead></thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-end">Sub Total</td>
<td class="text-end" id="subTotal">0</td>
</tr>
</tbody>
</table>
【讨论】:
以上是关于如何使用Javascript获取输入值的总和?的主要内容,如果未能解决你的问题,请参考以下文章