Блог

Главная - Вопросы по программированию - Javascript: Автоматический расчет выпадающей цены*ввод количества

Javascript: Автоматический расчет выпадающей цены*ввод количества

#javascript #html

Вопрос:

Этот код должен позволять пользователям выбирать размер и количество баннеров, и код автоматически рассчитает цену, которую они должны заплатить. Я пробовал так много способов, но ничего не вышло. Ниже приведен код, который я сделал

 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>

Ответ №1:

Вы использовали идентификатор=количество, но назвали количество в качестве точки

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

Вы можете увидеть id=»точки» в приведенной выше строке, а в javascript вы использовали «количество».

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

И не могу догадаться, для чего на самом деле написано «если бы», каждое условие выполняет одну и ту же работу. Так что уберите «если-еще». Попробуйте код ниже.

     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;
    }

Комментарии:

1. Я пытаюсь отредактировать, как вы предлагаете, но это все равно не сработало

Ответ №2:

Идентификатор второго div неверен, кроме того, вы должны рассчитать цену только при выборе обоих входных данных:

 function calculateAmount() {

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

  var tot_price;

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

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

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

  /*display the result*/


} 
 <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>

Ответ №3:

Переменная selScnd должна быть выбрана с идентификатором point , а не шириной quantity , так как такого идентификатора нет quantity . Другими словами, в вашем коде есть опечатка.

Ваш код должен быть таким:

 function calculateAmount() {

  var selFrst = parseInt(document.getElementById("size").value);
  var selScnd = parseInt(document.getElementById("points").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>

Комментарии:

1. не могли бы вы, пожалуйста, сказать мне, что если-еще здесь делает?

2. @SubhashisPandey Как вы можете видеть, каждый параметр в select input имеет атрибут value (значение=»120″, значение=»80″ и значение=»64″), он использовал if-else для сравнения этих значений. а затем эти значения умножаются на второй вход/переменную, а не на 4×10 и т. Д., Потому что мы выбрали значения входных данных

3. «он использовал if-else для сравнения этих значений» Я не думаю, что «САБРИНА» — это «он».

4. ?- разве это так важно?

Ответ №4:

 function calculateAmount() {

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

  if ([120, 80, 64].includes(selFrst)) {
    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">
          <option value="0" disabled selected>--Choose Size--</option>
          <option value="120">4*15</option>
          <option value="80">4*10</option>
          <option value="64">4*8</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Quantity</td>
      <td>
        <input type="number" id="points" name="points" step="1" min="1" max="499">
      </td>
    </tr>

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

  </table>
</form>

Как сказал @swebdev: «Переменная selScnd должна быть выбрана с ее идентификатором point , потому что такого идентификатора нет quantity .

Вы можете поместить значения (120,80,64) в массив, чтобы вы могли легко добавлять дополнительные значения, не повторяя if-else.

Наконец, вместо того, чтобы использовать onchange="" дважды, вы можете использовать onfocus="" в этом последнем поле ввода только для чтения. 🙂

Ответ №5:

Все равно не получится

     <table border="1"width="50%">
        <col style="width:15%">
        <col style="width:35%">
        <!--form title-->  
        <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="quantity" name="quantity" 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>


<script>

    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;
}
    </script> <!--end table-->

Комментарии:

1. вместо того, чтобы публиковать свой запрос в качестве ответа, вы должны добавить комментарий или обновить свой вопрос.

2. Пожалуйста, добавьте дополнительные сведения, чтобы расширить свой ответ, например, ссылки на рабочий код или документацию.

Метки: