使用Javascript创建订单计算页面

Create an Order Calculation Page using Javascript

本文关键字：计算 Javascript 创建 单计算 使用      更新时间：2023-09-26

这个脚本应该允许用户计算他们想要订购的所有项目的总账单。

当用户选择项目和数量时，产品和相关字段应添加到列表中的下一行。此外，单价和价格字段应自动计算并填写。

我的问题是，我从哪里开始？我对JavaScript使用哪种方法感到困惑。

这是我到目前为止的代码：

<!DOCTYPE html>
<html>
<head>
<title>The Irish Homeland Micro-Brewery</title>
<script type="text/javascript">
function calcList() // *** call "Add to List" button to function ***
{
    var BeverageItem = document.getElementById("beverageSelection").value;
    var QuantitySelection = document.getElementById("quantitySelection").value;
}
</script>
</head>
<body align="center">
<h1>Irish HomeLand Micro-Brewrey Cost Calculator</h1>
<p>Order Some Beverage(s) below</p>
<p>
    Beverage: 
    <select id="beverageSelection">
        <option value="24.99" id="shama">Shamrock Ale - $24.99/case</option>
        <option value="27.99" id="lucky">Lucky Pillsner - $27.99/case</option>
        <option value="27.99" id="irishw">Irish Wheat - $27.99/case</option>
        <option value="32.99" id="irishm">Irish Malt - $32.99/case</option>
        <option value="35.99" id="shamr">Shamrock Rye - $35.99/case</option>
    </select> 
Quantity:
    <select id="quantitySelection">
        <option value="1" id="opt1">1</option>
        <option value="2" id="opt2">2</option>
        <option value="3" id="opt3">3</option>
        <option value="4" id="opt4">4</option>
    </select>
    <!--- use the button to add together ---> 
    <input type="button" value="Add to List" id="addList" onClick="calcList()">
    <input type="reset" id="resetBtn" value="Clear All">
</p>
<table align="center" border="1" style="width:50%">
    <tr >
        <td>Item Description</td>
        <td>Unit Price</td>
        <td>Qty</td>
        <td>Price <sup>(unit*qty+ship)</sup></td>
    </tr>
    <tr>
        <td><input type="text" id="txtItem1" readonly></td>
        <td><input type="text" id="txtUnit1" readonly></td>
        <td><input type="text" id="txtQty1" readonly></td>
        <td><input type="text" id="txtPrice1" readonly></td>
    </tr>
    <tr>
        <td><input type="text" id="txtItem2" readonly></td>
        <td><input type="text" id="txtUnit2" readonly></td>
        <td><input type="text" id="txtQty2" readonly></td>
        <td><input type="text" id="txtPrice2" readonly></td>
    </tr>
    <tr>
        <td><input type="text" id="txtItem3" readonly></td>
        <td><input type="text" id="txtUnit3" readonly></td>
        <td><input type="text" id="txtQty3" readonly></td>
        <td><input type="text" id="txtPrice3" readonly></td>
    </tr>
    <tr>
        <td><input type="text" id="txtItem4" readonly></td>
        <td><input type="text" id="txtUnit4" readonly></td>
        <td><input type="text" id="txtQty4" readonly></td>
        <td><input type="text" id="txtPrice4" readonly></td>
    </tr>
    <tr>
        <td><input type="text" id="txtItem5" readonly></td>
        <td><input type="text" id="txtUnit5" readonly></td>
        <td><input type="text" id="txtQty5" readonly></td>
        <td><input type="text" id="txtPrice5" readonly></td>
    </tr>
    <tr>
        <td><input type="text" id="txtItem6" readonly></td>
        <td><input type="text" id="txtUnit6" readonly></td>
        <td><input type="text" id="txtQty6" readonly></td>
        <td><input type="text" id="txtPrice6" readonly></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td align="right">Total</td>
        <td><input type="text" id="total" readonly></td>
    </tr>
</table>
</body>
</html>

问题的核心是，您无法像进行文本输入那样访问选择框中的值。您需要找到selectedIndex才能获得它的值。

所以，改变

document.getElementById("beverageSelection").value;

至

var fld = document.getElementById("beverageSelection");
var fldval = fld.options[fld.selectedIndex].value;

然后您可以在calc函数中进行计算，从fldval变量

中获得总数
相关文章：