Question

该脚本应该允许用户计算他们想要订购的所有商品的总账单。

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

我的问题是，我从哪里开始？我对使用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>

Answer 1

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

所以，改变

document.getElementById("beverageSelection").value;

到

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

然后你可以在calc函数中进行数学计算，从fldval变量获得总数

使用Javascript创建订单计算页面

1 个答案: