如何正确访问HTML number输入框值解决金额计算结果异常问题

输入框的.value属性返回值默认是字符串类型，不是数值类型。
你代码里0.20 * transferamount这一步因为是乘法运算，JS会自动把字符串隐式转换为数字计算，输入40时这步得到结果8；但前面执行transferamount + 8时，+运算符遇到字符串类型的操作数会优先执行字符串拼接，而不是数值加法，最终就得到了"40" + "8" = "408"的错误结果。

获取输入值后显式转换为数字类型再做计算即可，转换可以用Number()、parseFloat()或者前置+的隐式转换方式。计算逻辑也可以直接简化为「输入金额 * 1.2」，和「本金+20%手续费」结果完全一致。

修复后的完整代码：

<form>
  <input type="number" id="sendamount" value="" name="amounttosend" oninput="myFunc()" required>
  <input type="text" id="totalled" value="" readonly>
</form>

function myFunc() {
  const sendInput = document.getElementById("sendamount");
  const totalInput = document.getElementById("totalled");
  // 输入为空时清空结果，避免展示NaN
  if (!sendInput.value.trim()) {
    totalInput.value = "";
    return;
  }
  // 显式转数字后计算
  const transferAmount = Number(sendInput.value);
  totalInput.value = transferAmount * 1.2;
}

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