为何HTML表单输入十进制数后乘法计算结果为0？

你使用parseInt()函数转换输入值时，该函数仅负责将字符串转为整数，会直接截断小数部分。比如输入0.5时，parseInt("0.5")会返回0，后续相乘结果自然为0；而输入整数时parseInt能正常解析，因此运算正常。另外你给type="number"的输入框设置了非数值初始值"any"，这会被浏览器视为无效值，也可能引发转换异常。

将parseInt替换为parseFloat，同时修正输入框初始值：

<form oninput="x.value=parseFloat(a.value)*parseFloat(b.value)*parseFloat(c.value) + '&nbsp Cubic feet'">
  <label for="a">Width (ft)</label> &nbsp
  <input type="number" id="a" value="0"><br><br>
  <label for="b">Length (ft)</label>
  <input type="number" id="b" value="0"><br><br>
  <label for="c">Height (ft)</label>
  <input type="number" id="c" value="0"><br><br>
  <label for="total"> The total volume of your concrete area is : </label>
  <output name="x" for="a b c"></output>
</form>

也可以使用Number()函数完成转换，效果一致：

<form oninput="x.value=Number(a.value)*Number(b.value)*Number(c.value) + '&nbsp Cubic feet'">
  <label for="a">Width (ft)</label> &nbsp
  <input type="number" id="a" value="0"><br><br>
  <label for="b">Length (ft)</label>
  <input type="number" id="b" value="0"><br><br>
  <label for="c">Height (ft)</label>
  <input type="number" id="c" value="0"><br><br>
  <label for="total"> The total volume of your concrete area is : </label>
  <output name="x" for="a b c"></output>
</form>

• parseFloat()可以正确解析带小数的数字字符串，比如parseFloat("1.5")返回1.5，parseFloat("0.8")返回0.8，确保乘法运算能得到正确的小数结果。
• type="number"的输入框不要设置"any"这类非数值内容，否则浏览器会判定为无效值，转换时可能得到NaN，导致运算结果异常。

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