JavaScript实现下拉选规格乘数量自动计算横幅价格功能报错求助

存在的问题 #

• 变量ID不匹配：JS代码中获取购买数量的元素ID写的是quantity，但HTML中数量输入框的实际ID是points，导致无法正确读取购买数值
• 缺少边界校验：未对未选择尺寸、未输入数量的场景做处理，会出现计算结果为undefined的异常展示
• 冗余判断：三个尺寸判断分支逻辑完全一致，可简化代码

修复后的完整代码 #

JS代码

function calculateAmount() {
  // 正确获取对应ID的元素值，为空/无效值时默认赋值0
  const sizePrice = parseInt(document.getElementById("size").value) || 0;
  const quantity = parseInt(document.getElementById("points").value) || 0;

  let tot_price = 0;
  // 只要尺寸和数量都有效就直接计算，不需要多分支判断
  if (sizePrice > 0 && quantity >= 1) {
    tot_price = sizePrice * quantity;
  }

  // 空值时展示0，避免显示undefined
  document.getElementById("tot_amount").value = tot_price;
}

HTML代码

<form id="banner" method="post" action="">
  <table border="1" width="50%">
    <col style="width:15%">
    <col style="width:35%">
    <!--form title-->
    <tr>
      <!--general-->
      <th colspan="2">General</th>
    </tr>
    <tr>
      <td>尺寸</td>
      <td>
        <select name="size" id="size" onchange="calculateAmount()">
          <option value="0" disabled selected>--选择尺寸--</option>
          <option value="120">4x15</option>
          <option value="80">4x10</option>
          <option value="64">4x8</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>购买数量</td>
      <td>
        <!-- 补充input事件，输入时实时计算，不需要失焦才触发 -->
        <input type="number" id="points" name="points" step="1" min="1" max="499" onchange="calculateAmount()" oninput="calculateAmount()">
      </td>
    </tr>
    <tr>
      <td>订单总价：RM</td>
      <td><input name="tot_amount" id="tot_amount" type="text" readonly></td>
    </tr>
    <!--end payment-->
  </table>
</form>

优化说明 #

• 修正了ID不匹配的核心问题，保证数值读取正常
• 增加了异常值兼容，未选择尺寸/未输入数量时默认展示0，不会出现异常内容
• 给数量输入框增加了oninput事件触发计算，修改数值时实时更新总价，不需要失去焦点才生效
• 简化了冗余的多分支判断，代码更简洁易维护

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