使用表格的价格计算器

Price Calculator Using Forms

本文关键字：计算器表格更新时间：2023-09-26

所以事情是这样的，我想通过让用户填写表格来制作一个价格计算器，但它不起作用。另外，我想在输入字段上显示结果。提前谢谢你。

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

错误

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

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