Javascript:自动计算下拉价格*数量输入

Question

此代码应允许用户选择横幅的尺寸和数量，并且代码将自动计算他们必须支付的价格。我尝试了很多方法但都失败了。下面是我完成的代码

function calculateAmount() {

  var selFrst = parseInt(document.getElementById("size").value);
  var selScnd = parseInt(document.getElementById("quantity").value);

  var tot_price;

  if (selFrst == 120) {
    tot_price = selFrst * selScnd;
  } else if (selFrst == 80) {
    tot_price = selFrst * selScnd;

  } else if (selFrst == 64) {
    tot_price = selFrst * selScnd;

  }

  /*display the result*/

  document.getElementById("tot_amount").value = tot_price;
}

<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>Size</td>
      <td>
        <select name="size" id="size" onchange="calculateAmount()">
          <option value="0" disabled selected>--Choose Size--</option>
          <option value="120">4x15</option>
          <option value="80">4x10</option>
          <option value="64">4x8</option>

        </select>
      </td>
    </tr>
    <tr>
      <td>Quantity</td>
      <td>
        <input type="number" id="points" name="points" step="1" min="1" max="499" onchange="calculateAmount()">
      </td>
    </tr>

    <tr>
      <td>Order Total:RM</td>
      <td><input name="tot_amount" id="tot_amount" type="text" readonly></td>
    </tr>
    <!--end payment-->

  </table>
</form>

Answer 1

您使用了 id=quantity，但将 amount 命名为 point

<input type="number" id="points" name="points" step="1" min="1" max="499" onchange="calculateAmount()">

您可以在上面的行中看到 id="points"，并且在 javascript 中您使用了“quantity”

var selScnd = parseInt(document.getElementById("quantity").value);

并且无法猜测 if-else 实际上是为了什么而写的，每个条件都在做相同的工作。所以删除 if-else。尝试下面的代码。

    function calculateAmount() {

        var selFrst = parseInt(document.getElementById("size").value);
        var selScnd = parseInt(document.getElementById("points").value);

        var tot_price = selFrst * selScnd;

        /*display the result*/

        document.getElementById("tot_amount").value = tot_price;
    }