使用Javascript计算HTML表格总价返回NaN问题求助

问题根源 #

document.getElementsByName() 方法返回的是符合name属性条件的所有DOM节点组成的集合（NodeList类型），不是单个DOM元素，直接把集合传给parseFloat()无法解析出有效数字，最终得到NaN。

排查步骤 #

• 在multiply函数开头添加console.log(document.getElementsByName("u-price"))，可以看到输出的是类数组结构，并不是单个input元素
• 继续打印parseFloat(document.getElementsByName("u-price"))，可确认该语句返回值就是NaN，后续乘法操作自然也会得到NaN
• 额外需要补充非数字输入的边界处理，避免用户输入非数值内容时再次出现NaN问题

修复后的代码 #

JavaScript代码 #

function multiply() {
    // 取NodeList的第一个元素的value属性做数值转换，转换失败默认用0兜底
    var u_price = parseFloat(document.getElementsByName("u-price")[0].value) || 0;
    var s_meter = parseFloat(document.getElementsByName("s-meter")[0].value) || 0;
    var t = u_price * s_meter;
    document.getElementById("tot-price").value = t.toFixed(3);
}

可选优化 #

可以把onKeyUp替换为onInput，覆盖键盘输入、复制粘贴、数值调整等所有值变更场景，计算触发更灵敏：

<tr>
  <td><input type="text" class="input-box" name="u-price" value="0" onInput="multiply();"></td>
  <td><input type="text" class="input-box" name="s-meter" value="1" onInput="multiply();"></td>
  <td><input type="text" class="input-box" name="tot-price" id="tot-price" disabled></td>
</tr>

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