HTML表单如何对输入值求和？计算每日列工时返回空白无报错如何解决

我尝试对HTML表单中每列/每天的工时数值进行求和，但得到的结果为空白，控制台没有输出任何报错信息，无法定位操作错误的原因。

HTML表单代码 #

<form>
<table>
 <tr>
     <th> MONDAY </th>
     <th> TUESDAY </th>
     <th> WEDNESDAY </th>
     <th> THURSDAY </th>
     <th> FRIDAY </th>
     <th> SATURDAY </th>
     <th> SUNDAY </th>
 </tr>
<?php
$q = "SELECT * FROM workHours";
$r = mysqli_query($conn, $q);

while($row = mysqli_fetch_assoc($r)) {
$db_mon = $row['mon'];
$db_tues = $row['tues'];
$db_wed = $row['wed'];
$db_thurs = $row['thurs'];
$db_fri = $row['fri'];
$db_sat = $row['sat'];
$db_sun = $row['sun'];

echo "
<tr>
    <td> <input name='mon' type='number' value='$db_mon' onblur='findMonTotal()'></td>
    <td> <input name='tues' type='number' value='$db_tues' onblur='findTuesTotal()'></td>
    <td> <input name='wed' type='number' value='$db_wed' onblur='findWedTotal()'></td>
    <td> <input name='thurs' type='number' value='$db_thurs' onblur='findThursTotal()'></td>
    <td> <input name='fri' type='number' value='$db_fri' onblur='findFriTotal()'></td>
    <td> <input name='sat' type='number' value='$db_sat' onblur='findSatTotal()'></td>
    <td> <input name='sun' type='number' value='$db_sun' onblur='findSunTotal()'></td>
</tr>
";
}
?>

<tr>
   <td> <input type="number" id="monTotal" readonly> </td>
   <td> <input type="number" id="tuesTotal" readonly> </td>
   <td> <input type="number" id="wedTotal" readonly> </td>
   <td> <input type="number" id="thursTotal" readonly> </td>
   <td> <input type="number" id="friTotal" readonly> </td>
   <td> <input type="number" id="satTotal" readonly> </td>
   <td> <input type="number" id="sunTotal" readonly> </td>
</tr>

</table>
</form>

原JavaScript代码 #

我为每一天都使用了如下形式的函数，尝试使用getElementById也得到了相同的结果：

function findMonTotal() {
let arr = document.getElementsByName('mon').value;
let Mon = 0;
   for(var i = 0; i < arr.length; i++) {
   if(parseFloat(arr[i].value))
      Mon += parseFloat(arr[1].value);
   }

}
document.getElementById('monTotal').value = Mon;

错误原因及修复方案 #

存在的错误 #

• document.getElementsByName()返回的是同名元素的节点集合，不是单个元素，直接访问.value会得到undefined，后续循环自然不会执行
• 给monTotal赋值的代码写在了函数外部，函数内部定义的Mon是局部变量，外部无法访问，且外部代码仅会在页面加载时执行一次，不会在onblur触发时更新值
• 循环内累加时错误写死了下标为1，应该使用当前循环的下标i，否则只会重复累加第二个元素的值，甚至出现下标越界问题

修复后的代码（以周一的求和函数为例，其他日期可参照修改） #

function findMonTotal() {
  // 直接获取所有name为mon的节点集合，不要加.value
  let arr = document.getElementsByName('mon');
  let monTotal = 0;
  for(let i = 0; i < arr.length; i++) {
    // 转换为数值，非数值或空值按0处理
    let val = parseFloat(arr[i].value) || 0;
    monTotal += val;
  }
  // 赋值逻辑放到函数内部，每次触发blur都会更新结果
  document.getElementById('monTotal').value = monTotal;
}

内容的提问来源于stack exchange，提问作者JDeLeon