Question

我正在制作这个迷你购物应用，并且无法弄清楚如何获得代码将产品成本加在一起，然后在页面上产生总成本。我也无法解决如何将交付添加到他最终的成本中。任何帮助将不胜感激：）

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

Answer 1

如果您尝试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>

Answer 2

这应该可以解决问题（运输尚未实施）：

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);
}

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

2 个答案: