我的购物应用程序不会将用户想要购买的东西相加，也不会打印总成本

My shopping app wont add up what the user wants to buy and doesnt print the total cost

本文关键字：打印 总成本 应用程序 用户 我的      更新时间：2023-09-26

我正在制作这个迷你购物应用程序，但不知道如何获得代码来将prodcut成本加在一起，然后在页面上产生总成本。我也不知道最后如何把交货计入成本。如有任何帮助，我们将不胜感激：）

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />

<script>

    function clickHandler() {
        var orderTotal =      parseInt(document.getElementById('shirtSelect').value * document.getElementById('shirtQuantity').value) + (document.getElementById('tieSelect').value * document.getElementById('tieQuantity').value);
        //Shirt Select
        switch (document.getElementById('shirtSelect').value) {
            case 'whiteShirt':
                orderTotal = orderTotal + 10;
                break;
            case 'blueShirt':
                orderTotal = orderTotal + 10;
                break;
            case 'redShirt':
                orderTotal = orderTotal + 10;
                break;
            default:
                orderTotal = orderTotal + 0;
                break;
        }
        switch (document.getElementById('tieSelect').value) {
            case 'blueTie':
                orderTotal = orderTotal + 7.50;
                break;
            case 'blackTie':
                orderTotal = orderTotal + 7.50;
                break;
            case 'redTie':
                orderTotal = orderTotal + 7.50;
            default:
                orderTotal = orderTotal + 0;
                break;
        }

        alert("Your order total is " + orderTotal);
    }
</script>
</head>
<body>
<select id="shirtSelect">
    <option value="whiteShirt">White Shirt</option>
    <option value="blueShirt">Blue Shirt</option>
    <option value="redShirt">Red Shirt</option>
</select>
<select id="shirtQuantity">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<!-- TIE HERE-->
<br />
<select id="tieSelect">
    <option value="blueTie">Blue Tie</option>
    <option value="blackTie">Black Tie</option>
    <option value="redTie">Red Tie</option>
</select>
<select id="tieQuantity">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<br />
<select id="deliverySelect">
    <option value="standard">Standard: FREE</option>
    <option value="express">Express: £3.00</option>
    <option value="nextDay">Next Day: £5.00</option>
</select>
<br />
<select id="customerType">
    <option value="nonreg">Non-registered: No Discount</option>
    <option value="reg">Registered: 10% Discount</option>
    <option value="VIP">VIP: 20% Discount</option>
</select>
<br />
<button type="button" onclick="clickHandler();">Place Order!</button>

如果您尝试alert(document.getElementById('shirtSelect').value)，您会发现它返回衬衫名称。使用此值来计算orderTotal是错误的，它将是NaN。

以下代码片段将有所帮助。

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
    function clickHandler() {
      //alert(document.getElementById('shirtSelect').value)
        var orderTotal = 0; 
        var shirtQuantity = document.getElementById('shirtQuantity').value;
        var tieQuantity = document.getElementById('tieQuantity').value;
      //Shirt Select
        switch (document.getElementById('shirtSelect').value) {
            case 'whiteShirt':
                orderTotal = orderTotal + 10*shirtQuantity;
                break;
            case 'blueShirt':
                orderTotal = orderTotal + 10*shirtQuantity;
                break;
            case 'redShirt':
                orderTotal = orderTotal + 10*shirtQuantity;
                break;
            default:
                orderTotal = orderTotal + 0;
                break;
        }
        switch (document.getElementById('tieSelect').value) {
            case 'blueTie':
                orderTotal = orderTotal + 7.50*tieQuantity;
                break;
            case 'blackTie':
                orderTotal = orderTotal + 7.50*tieQuantity;
                break;
            case 'redTie':
                orderTotal = orderTotal + 7.50*tieQuantity;
            default:
                orderTotal = orderTotal + 0;
                break;
        }
        alert("Your order total is " + orderTotal);
    }
</script>
</head>
<body>
<select id="shirtSelect">
    <option value="whiteShirt">White Shirt</option>
    <option value="blueShirt">Blue Shirt</option>
    <option value="redShirt">Red Shirt</option>
</select>
<select id="shirtQuantity">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<!-- TIE HERE-->
<br />
<select id="tieSelect">
    <option value="blueTie">Blue Tie</option>
    <option value="blackTie">Black Tie</option>
    <option value="redTie">Red Tie</option>
</select>
<select id="tieQuantity">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<br />
<select id="deliverySelect">
    <option value="standard">Standard: FREE</option>
    <option value="express">Express: £3.00</option>
    <option value="nextDay">Next Day: £5.00</option>
</select>
<br />
<select id="customerType">
    <option value="nonreg">Non-registered: No Discount</option>
    <option value="reg">Registered: 10% Discount</option>
    <option value="VIP">VIP: 20% Discount</option>
</select>
<br />
<button type="button" onclick="clickHandler();">Place Order!</button>

这应该可以做到（发货尚未实现）：

function clickHandler() {
    var orderTotal = 0;
    //Shirt Select
    switch (document.getElementById('shirtSelect').value) {
        case 'whiteShirt':
        case 'blueShirt':
        case 'redShirt':
            orderTotal += 10 * +document.getElementById('shirtQuantity').value;
            break;
        default:
            break;
    }
    switch (document.getElementById('tieSelect').value) {
        case 'blueTie':
        case 'blackTie':
        case 'redTie':
            orderTotal += 7.50 * +document.getElementById('tieQuantity').value;
        default:
            break;
    }
    alert("Your order total is " + orderTotal);
}
相关文章：