如何编写 JavaScript calAmount function 计算总金额

2026-10-24支付小周

结论

calAmount() 从表单中读取 unitPrice 和 quantity，把它们从字符串转换为数字，计算乘积，再将结果写入 amount 输入框。

<script>
function calAmount() {
  const form = document.forms["order"];
  const unitPrice = Number(form.elements["unitPrice"].value);
  const quantity = Number(form.elements["quantity"].value);

  if (!Number.isFinite(unitPrice) || !Number.isFinite(quantity)) {
    form.elements["amount"].value = "";
    alert("请输入有效的单价和数量");
    return;
  }

  form.elements["amount"].value = unitPrice * quantity;
}
</script>

为什么需要转换数据类型

文本输入框的 value 始终是字符串。JavaScript 执行乘法时通常会自动转换类型，但显式调用 Number() 更容易理解，也方便检查输入是否合法。

计算公式是：

amount = unitPrice * quantity

Number.isFinite() 可以确认转换结果是否为有效的有限数值，防止把 NaN 或 Infinity 写入金额字段。

完整示例

<form name="order" method="POST">
  <p>
    Unit price:
    <input type="number" name="unitPrice" min="0" step="0.01">
  </p>

  <p>
    Quantity:
    <input type="number" name="quantity" min="0" step="1">
  </p>

  <p>
    Amount:
    <input type="text" name="amount" readonly>
  </p>

  <button type="button" onclick="calAmount()">Find amount</button>
</form>

<script>
function calAmount() {
  const form = document.forms["order"];
  const unitPriceText = form.elements["unitPrice"].value.trim();
  const quantityText = form.elements["quantity"].value.trim();
  const amountField = form.elements["amount"];

  if (unitPriceText === "" || quantityText === "") {
    amountField.value = "";
    alert("单价和数量不能为空");
    return;
  }

  const unitPrice = Number(unitPriceText);
  const quantity = Number(quantityText);

  if (
    !Number.isFinite(unitPrice) ||
    !Number.isFinite(quantity) ||
    unitPrice < 0 ||
    quantity < 0
  ) {
    amountField.value = "";
    alert("请输入有效的非负数");
    return;
  }

  amountField.value = (unitPrice * quantity).toFixed(2);
}
</script>

注意事项

Number("") 会得到 0，所以要先检查输入框是否为空。
金额通常保留两位小数，可以使用 toFixed(2)。它返回格式化后的字符串，可以直接写入输入框。
amount 保存计算结果，建议添加 readonly，避免用户直接修改。
maxlength 通常不适用于 type="number"。如果要限制数值范围，应使用 min、max 和 step，并在 JavaScript 或服务端再次校验。
浮点数计算可能有精度误差。例如，某些小数相乘无法得到完全精确的十进制结果。普通页面展示可以用 toFixed(2) 格式化；支付或财务结算通常应以最小货币单位（如”分”）进行整数计算，并由服务端完成最终校验。
前端算出的订单金额不能作为可信数据。订单提交后，服务端仍需根据商品单价和数量重新计算。