javascript - 自动求和输入值并使用 Javascript 显示
问题描述
基本上我想用以上所有输入字段的总和来更新一个输入字段。
这是标签内 HTML 的一部分:
<tr>
<td width="20%">Admission Fee:</td>
<td width="80%"><input onchange="findTotal()" type="text" class="input_box" name="admission_fee" id="fee" size="5" value="" maxlength="6" oninput="this.value = this.value.replace(/[^0-9]/, \'\');"></td>
</tr>
<tr>
<td width="20%">Annual Fee:</td>
<td width="80%"><input onchange="findTotal()" type="text" class="input_box" name="annual_fee" id="fee" size="5" value="" maxlength="6" oninput="this.value = this.value.replace(/[^0-9]/, \'\');"></td>
</tr>
<tr>
<td width="20%">Paper Money Fee:</td>
<td width="80%"><input onchange="findTotal()" type="text" class="input_box" name="paper_money_fee" id="fee" size="5" value="" maxlength="6" oninput="this.value = this.value.replace(/[^0-9]/, \'\');"></td>
</tr>
<tr>
<td width="20%">Monthly Fee:</td>
<td width="80%"><input onchange="findTotal()" type="text" class="input_box" name="monthly_fee" id="fee" size="5" value="" maxlength="6" oninput="this.value = this.value.replace(/[^0-9]/, \'\');"></td>
</tr>
<tr>
<td width="20%">Remaining Balance:</td>
<td width="80%"><input onchange="findTotal()" type="text" class="input_box" name="remaining_balance" id="fee" size="5" value="" maxlength="6" oninput="this.value = this.value.replace(/[^0-9]/, \'\');"></td>
</tr>
<tr>
<td class="school_trow2" width="20%">Total Fee:</td>
<td class="school_trow2" style="padding: 3px 0;" width="80%"><input type="text" class="input_box" style="background: #8CDFFF; border: 1px solid #006991; color: #000;" name="total_fee" id="total_fee" size="5" value="" disabled></td>
</tr>
这是我正在使用的 Javascript:
<script type="text/javascript">
function findTotal()
{
var arr = document.getElementById(\'fee\');
var tot=0;
for(var i=0;i<arr.length;i++)
{
if(parseInt(arr[i].value))
{
tot += parseInt(arr[i].value);
}
}
document.getElementById(\'total_fee\').value = tot;
}
</script>
任何帮助,将不胜感激。
解决方案
This is what I've come up with.
- You are using same Id for multiple elements. I added the same class to the elements instead
- You are using
<input type='text'
then checking for numbers using regex. A better approach would be to just use<input type='number'
- Since
maxlength
does not work ontype='number'
, I have usedmax
to handle 6 digit limit.
function findTotal() {
const fees = document.querySelectorAll(".fee");
const total = document.querySelector("#total_fee");
let sum = 0;
fees.forEach(fee => {
if(fee.valueAsNumber){
sum += fee.valueAsNumber;
}
});
total.value = sum;
}
<tr>
<td width="20%">Admission Fee:</td>
<td width="80%"><input onchange="findTotal()" type="number" class="input_box fee" name="admission_fee" value="" min='0' max='999999'></td>
</tr>
<tr>
<td width="20%">Annual Fee:</td>
<td width="80%"><input onchange="findTotal()" type="number" class="input_box fee" name="annual_fee" value="" min='0' max='999999'></td>
</tr>
<tr>
<td width="20%">Paper Money Fee:</td>
<td width="80%"><input onchange="findTotal()" type="number" class="input_box fee" name="paper_money_fee" value="" min='0' max='999999'></td>
</tr>
<tr>
<td width="20%">Monthly Fee:</td>
<td width="80%"><input onchange="findTotal()" type="number" class="input_box fee" name="monthly_fee" value="" min='0' max='999999'></td>
</tr>
<tr>
<td width="20%">Remaining Balance:</td>
<td width="80%"><input onchange="findTotal()" type="number" class="input_box fee" name="remaining_balance" value="" min='0' max='999999'></td>
</tr>
<tr>
<td class="school_trow2" width="20%">Total Fee:</td>
<td class="school_trow2" style="padding: 3px 0;" width="80%"><input type="text" class="input_box" style="background: #8CDFFF; border: 1px solid #006991; color: #000;" name="total_fee" id="total_fee" size="5" value="" disabled></td>
</tr>
推荐阅读
- r - 如何将优化函数输出绑定到 R 中的数据框?
- groovy - Groovy 元编程:覆盖 Map invokeMethod
- excel - 子调用第一个子但不调用第二个子
- sh - 如何关闭后台运行的程序
- python - invoke.context.Context 为缺少位置参数给出了一个奇怪的错误
- pandas - 使用列名而不是索引的 Pandas 数据帧转置抛出 ValueError
- node.js - 如何生成一个启动电子应用程序的子进程,然后在保持父进程存活的同时杀死它?
- vega - 如何根据列突出显示 vega 中的正确栏?
- sql - VBA SQL查询到一个范围
- c - 包括正确的内在标头