javascript - 自动求和输入值并使用 Javascript 显示

Question

基本上我想用以上所有输入字段的总和来更新一个输入字段。

这是标签内 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>

任何帮助将不胜感激。

Answer 1

这是我想出的。

• 您对多个元素使用相同的 ID。我改为将相同的类添加到元素中
• 您正在使用 <input type='text'然后使用正则表达式检查数字。更好的方法是只使用 <input type='number'
• 自 maxlength 起不适用于 type='number' , 我用过max处理 6 位数的限制。

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>