价格计算器使用表格

所以这里的东西，我想通过让用户填写表格，但它不会工作，使价格计算器。另外，我想在输入字段中显示结果。先谢谢你。价格计算器使用表格

<!doctype HTML> 
 
<html lang="en"> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<title> 
 

 
</title> 
 
<head> 
 

 
</head> 
 
<body> 
 
    <form role="form" id="price" name="price">  
 
     <select class="" id="itemselect" onchange="calculate()"> 
 
      <option id="itemprice" value="1.500">Adult's T-Shirt</option> 
 
      <option id="itemprice" value="1.250">Kid's T-Shirt</option> 
 
      <option id="itemprice" value="3.000">Dubai Polo</option> 
 
      <option id="itemprice" value="6.000">Aerocool Polo</option> 
 
      <option id="itemprice" value="4.000">Aerocool Crewneck</option> 
 
      <option id="itemprice" value="5.000">Hoodies</option> 
 
     </select> 
 
     <p><input type="text" id="qty" onchange="calculate()" value=""></p> 
 
     <p><input type="text" id="result" value="" disabled></p>   
 
    </form> 
 
    
 
    <script type="text/javascript"> 
 
     function calculate(price){ 
 
      var item = document.getElementByID("itemselect").value; 
 
      var qty = document.getElementByID("qty"); 
 
      
 
      item = parseInt(item); 
 
      qty = parseInt(qty); 
 
      
 
      var result = item*qty; 
 
      
 
      document.getElementByID("result").value=result; 
 
     } 
 
    </script> 
 
</body> 
 
</html>

来源

2016-03-10 Richelle

'getElementByID'，它的'getElementById' – Ramanlfc

和'变种数量=的document.getElementById（ “数量”）值;'代替'VAR数量=的document.getElementById（ “qty”）;' –

仍然是相同的。结果不是来 – Richelle

错误

通过的getElementById请更改的getElementById。
parseInt只能解析整数值，所以你的乘法只给出整数值，所以你必须在float中解析。它给你完美的输出。

<!doctype HTML> 
 
<html lang="en"> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<title> 
 

 
</title> 
 
<head> 
 

 
</head> 
 
<body> 
 
    <form role="form" id="price" name="price">  
 
     <select class="" id="itemselect" onchange="calculate()"> 
 
      <option id="itemprice" value="1.500">Adult's T-Shirt</option> 
 
      <option id="itemprice" value="1.250">Kid's T-Shirt</option> 
 
      <option id="itemprice" value="3.000">Dubai Polo</option> 
 
      <option id="itemprice" value="6.000">Aerocool Polo</option> 
 
      <option id="itemprice" value="4.000">Aerocool Crewneck</option> 
 
      <option id="itemprice" value="5.000">Hoodies</option> 
 
     </select> 
 
     <p><input type="text" id="qty" onchange="calculate()" value=""></p> 
 
     <p><input type="text" id="result" value="" disabled></p>   
 
    </form> 
 
    
 
    <script type="text/javascript"> 
 
     function calculate(price){ 
 
      var item = document.getElementById("itemselect").value || 0; 
 

 
      var qty = document.getElementById("qty").value || 0; 
 
      
 
      item = parseFloat(item).toFixed(2); 
 
      qty = parseFloat(qty).toFixed(2); 
 
      
 
      var result = parseFloat(item*qty).toFixed(2); 
 
          
 
      document.getElementById("result").value=result; 
 
     } 
 
    </script> 
 
</body> 
 
</html>

来源

2016-03-10 12:36:47

注意'parseFloat'，它可以给出意想不到的结果。尝试'数字（项目）'而不是！ –

试着在你的小提琴中选择“迪拜马球”并将“1.1”放入文本框中。它应该给出3.3的结果，但它给出了'3.30000000000003'，这是因为浮动的逗号。 –

@MarcosPérezGude感谢您的建议。我用另一种安全的方式更新了我的答案。 –

价格计算器使用表格

回答

相关问题