如何使用Javascript实时自动计算价格和产品

我用Javascript编写了这段代码，当用户从选择表单选项中进行选择时，它可以实时自动计算价格和产品数量。它很好用。现在我想使用表单输入自动计算，也就是说，实时计算将作为用户在表单输入中输入的值来完成

下面是使用“选择表单”选项的代码

    <script>
    function calculatePrice(myform){

      //Get selected data  
      var elt = document.getElementById("memoryItem");
      var memory = elt.options[elt.selectedIndex].value;

      var elt = document.getElementById("hddItem");
      var hdd = elt.options[elt.selectedIndex].value;

      var elt = document.getElementById("networkItem");
      var network = elt.options[elt.selectedIndex].value;

      //convert data to integers
      memory = parseInt(memory);
      hdd = parseInt(hdd);
      network = parseInt(network);

      //calculate total value  
      var total = memory+hdd+network; 

      //print value to  PicExtPrice 
      document.getElementById("PicExtPrice").value=total;

    }
    </script>



    <FORM Name="myform">
    <SELECT NAME="memoryItem" onChange="calculatePrice()" id="memoryItem">
      <OPTION value="0">--Select One Choice--</OPTION>
      <OPTION value="49">8 GB add $49</OPTION>
      <OPTION value="98">12 GB add $98</OPTION>
    </SELECT>

    <SELECT NAME="hddItem" onChange="calculatePrice()" id="hddItem">
      <OPTION value="0">--Select One Choice--</OPTION>
      <OPTION value="109">1 TB HD add $109</OPTION>
      <OPTION value="150">1.5 TB HD add $150</OPTION>
    </SELECT>

    <SELECT NAME="networkItem" onChange="calculatePrice()" id="networkItem">
      <OPTION value="0">--Select One Choice--</OPTION>
      <OPTION value="109">Laptop 1 $109</OPTION>
      <OPTION value="79">lapto 2 $79</OPTION>
    </SELECT>
    </FORM>

    <button type="button" onclick="calculatePrice()">Calculate</button>
    Total:<INPUT type="text" id="PicExtPrice" Size=8>  

Please how can I allow user  to enter values from form input and it will be auto calculated also instead of using select option.

Eg. As in the form below


    <FORM Name="myform">
   <b>Data 1</b> <input type="text" NAME="memoryItem" onChange="calculatePrice()" id="memoryItem">


  <b>Data 2</b>  <input type="text" NAME="hddItem" onChange="calculatePrice()" id="hddItem"><br>


   <b> Data 3</b> <input type="text" NAME="networkItem" onChange="calculatePrice()" id="networkItem">

    </FORM>

    <button type="button" onclick="calculatePrice()">Calculate</button>
    Total:<INPUT type="text" id="PicExtPrice" Size=8>  

---

谢谢

我认为一个快速的解决方案可能是：

<script>
function calculatePrice(myform){

  //Get selected data  
  var elt = document.getElementById("memoryItem");
  var memory = elt.options[elt.selectedIndex].value;
  var memoryQty = parseInt(document.getElementById("memoryItemQty").value);

  var elt = document.getElementById("hddItem");
  var hdd = elt.options[elt.selectedIndex].value;
  var hddQty = parseInt(document.getElementById("hddItemQty").value);

  var elt = document.getElementById("networkItem");
  var network = elt.options[elt.selectedIndex].value;
  var networkQty = parseInt(document.getElementById("networkItemQty").value);

  //convert data to integers
  memory = parseInt(memory)*memoryQty;
  hdd = parseInt(hdd)*hddQty;
  network = parseInt(network)*networkQty;

  //calculate total value  
  var total = memory+hdd+network; 

  //print value to  PicExtPrice 
  document.getElementById("PicExtPrice").value=total;

}
</script>



<FORM Name="myform">
<table>
<tr><th>Item</th><th>Qty</th></tr>
<tr>
<td>
<SELECT NAME="memoryItem" onChange="calculatePrice()" id="memoryItem">
  <OPTION value="0">--Select One Choice--</OPTION>
  <OPTION value="49">8 GB add $49</OPTION>
  <OPTION value="98">12 GB add $98</OPTION>
</SELECT>
</td><td><input type="text" id="memoryItemQty" value="1" onChange="calculatePrice()" /></td></tr><tr><td>
<SELECT NAME="hddItem" onChange="calculatePrice()" id="hddItem">
  <OPTION value="0">--Select One Choice--</OPTION>
  <OPTION value="109">1 TB HD add $109</OPTION>
  <OPTION value="150">1.5 TB HD add $150</OPTION>
</SELECT>
</td><td><input type="text" id="hddItemQty" value="1" onChange="calculatePrice()" /></td></tr><tr><td>
<SELECT NAME="networkItem" onChange="calculatePrice()" id="networkItem">
  <OPTION value="0">--Select One Choice--</OPTION>
  <OPTION value="109">Laptop 1 $109</OPTION>
  <OPTION value="79">lapto 2 $79</OPTION>
</SELECT>
</td><td><input type="text" id="networkItemQty" value="1" onChange="calculatePrice()" /></td></tr>
</tr>
</table>
</FORM>

<button type="button" onclick="calculatePrice()">Calculate</button>
Total:<INPUT type="text" id="PicExtPrice" Size=8>  

您还可以使用其他输入事件，如onkeypress、onkeyup或onkeydown

---

希望对您有所帮助

您的html中没有任何元素。你想让用户在哪里输入值？@bhspencer除非我遗漏了什么，否则select标签是输入标签，而不是字面意义上的我认为你需要重新植入你的问题。我想你需要为每种产品计算购买数量。对吗？我已经更新了我的问题，我需要帮助