在html

时间:2017-07-31 05:02:32

标签: javascript html forms

当我按提交订单将所购买的数量和订单总数添加到每日总计时,它最初工作但按下后每次按下后连续添加0.1。我有一个重置按钮,将dailyTotal设置为0,我只需要帮助在按下下订单后实际连续添加每个订单的总数。任何帮助都会很棒

//set base fee and dailyTotal
        var fee = 1.00;
        var dailyTotal = 0.00;
        var dailyTotalElement = document.getElementById("dailyTotal");

        //printing of order price/quantity
        function calculatePrice()
            {
            //convert input into *Element variable
            var cappuccinoElement = document.getElementById("quantityCappuccino");
            var espressoElement = document.getElementById("quantityEspresso");
            var latteElement = document.getElementById("quantityLatte");
            var icedElement = document.getElementById("quantityIced");
            var orderTotalElement = document.getElementById("orderTotal");

            //set base prices 
            var cappuccino = 3.00;
            var espresso = 2.25;
            var latte = 2.50;
            var iced = 2.50;

            //turn *Element variable into quantity* value
            var quantityCappuccino = cappuccinoElement.value;
            var quantityEspresso = espressoElement.value;
            var quantityLatte = latteElement.value;
            var quantityIced = icedElement.value;

            //calculate the cost
            var total = fee * (
                            (quantityCappuccino * cappuccino) + (quantityEspresso * espresso) + (quantityLatte * latte) + (quantityIced * iced)
                        );

            //printing of orderTotal cost (2 decimals)
            orderTotalElement.value = parseFloat(total).toFixed(2);
        }

        //send order to daily totals
        function placeOrder()
            {
            //convert input into *Element variable
            var cappuccinoTotalElement = document.getElementById("totalCappuccino");
            var espressoTotalElement = document.getElementById("totalEspresso");
            var latteTotalElement = document.getElementById("totalLatte");
            var icedTotalElement = document.getElementById("totalIced");
            var dailyTotalElement = document.getElementById("dailyTotal");


            //set base totals 
            var totalCappuccino = 0;
            var totalEspresso = 0;
            var totalLatte = 0;
            var totalIced = 0;

            //turn *Element variable into total* value
            var totalCappuccino = cappuccinoTotalElement.value;
            var totalEspresso = espressoTotalElement.value;
            var totalLatte = latteTotalElement.value;
            var totalIced = icedTotalElement.value;

            //add to the dailyTotal
            var dailyTotal = (dailyTotalElement.value += document.getElementById("orderTotal").value);
            var totalCappuccino = (cappuccinoTotalElement.value + document.getElementById("quantityCappuccino").value);
            var totalEspresso = (espressoTotalElement.value + document.getElementById("quantityEspresso").value);
            var totalLatte = (latteTotalElement.value + document.getElementById("quantityLatte").value);
            var totalIced = (icedTotalElement.value + document.getElementById("quantityIced").value);

            //printing of dailyTotal cost (2 decimals)
            dailyTotalElement.value = parseFloat(dailyTotal).toFixed(2);
        }

        //resetting inputs and outputs
        function clearTotal()
            {
            document.getElementById("orderTotal").value=0.00;
            document.getElementById("orderTotalReceipt").value=0.00;
            document.getElementById("quantityCappuccino").value=0;
            document.getElementById("quantityEspresso").value=0;
            document.getElementById("quantityLatte").value=0;
            document.getElementById("quantityIced").value=0;
            document.getElementById("takeawayYes").reset();
        }

        //resetting daily totals to start new day
        function endOfDay()
            {
            document.getElementById("dailyTotal").value=0.00;
            document.getElementById("totalCappuccino").value=0;
            document.getElementById("totalEspresso").value=0;
            document.getElementById("totalLatte").value=0;
            document.getElementById("totalIced").value=0;
        }

        //takeaway yes/no
        function feeIncur(chk_bx)
            {
            //check box ticked/unticked
            if(chk_bx.checked)
                {
                fee = 1.05;
            }
            else
                {
                fee = 1.00;
            }
        }

        //disallow negative number input
        var number = document.getElementsByName('number');
        number.onkeydown = function(e)
            {
            if(!((e.keyCode > 95 && e.keyCode < 106)
            || (e.keyCode > 47 && e.keyCode < 58) 
            || e.keyCode == 8)) 
            {
                return false;
            }
        }

以下是用于下订单的表单和输入的HTML

    <table>
        <tr align="center">
            <td>    
                Hot Drinks  
            </td>
            <td>
                Price
            </td>
            <td>
                Quantity
            </td>
        </tr>
        <tr>
            <form name="coffeeorder" id="coffeeorder">
            <td>
                Cappuccino  
            </td>
            <td align="center">
                $3.00
            </td>
            <td align="center">
                <input type="number" id="quantityCappuccino" name="number" value="0" min="0" max="20" onchange="calculatePrice()">
            </td>
        </tr>
        <tr>
            <td>
                Espresso
            </td>
            <td align="center">
                $2.25
            </td>
            <td align="center">
                <input type="number" id="quantityEspresso" name="number" value="0" min="0" max="20" onchange="calculatePrice()">
            </td>
        </tr>
        <tr>
            <td>
                Latte
            </td>
            <td align="center">
                $2.50
            </td>
            <td align="center">
                <input type="number" id="quantityLatte" name="number" value="0" min="0" max="20" onchange="calculatePrice()">
            </td>
        </tr>
        <tr>
            <td>
                Iced Coffee
            </td>
            <td align="center">
                $2.50
            </td>
            <td align="center">
                <input type="number" id="quantityIced" name="number" value="0" min="0" max="20" onchange="calculatePrice()">
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="takeawayYes" value="1" onchange="feeIncur(this); calculatePrice();">Takeaway?
            </td>
            <td>
                (5% fee incurs)
            </td>
        </tr>
        <tr>
            <td>
                <button type="reset" onclick="clearTotal();">New Order</button>
            </td>
            <td>
                Order total: <b>$</b>
                <input type="text" name="orderTotal" id="orderTotal" Size=6 readonly value="0.00">
            </td>
        </tr>
            </form>
        <tr>
            <td>
                <button type="button" onclick="placeOrder();">Place Order</button>
            </td>
        </tr>
    </table>

以下是用于计算总数的代码。

<table>
    <tr>
        <td>
            <div class="left">
                CAPPUCCINO
            </div>
            <div class="right">
                x
                <input type="text" name="totalCappuccino" id="totalCappuccino" Size=2 readonly value="0">
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="left">
                ESPRESSO
            </div>
            <div class="right">
                x
                <input type="text" name="totalEspresso" id="totalEspresso" Size=2 readonly value="0">
            </div>
           </td>
    </tr>
    <tr>
        <td>
            <div class="left">
                 LATTE
            </div>
            <div class="right">
                x
                <input type="text" name="totalLatte" id="totalLatte" Size=2 readonly value="0">
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="left">
                ICED COFFEE
            </div>
            <div class="right">
                x
                <input type="text" name="totalIced" id="totalIced" Size=2 readonly value="0">
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="left">
                DAILY TOTAL:
            </div>
            <div class="right">
                <input type="text" name="dailyTotal" id="dailyTotal" Size=10 readonly value="0.00">
            </div>
        </td>
    </tr>
</table>
<table>
    <tr>
        <td>
            <div align="center">
                <button type="button" onclick="endOfDay();">Run end of day</button>
            </div>
        </td>
    </tr>
</table>

1 个答案:

答案 0 :(得分:0)

尝试使用下面提到的功能替换placeOrder功能:

function placeOrder () {
    var orderTotalElement = document.getElementById("orderTotal");
    var countTotal = parseFloat(orderTotalElement.value);
    dailyTotal+= countTotal;
    dailyTotalElement.value = dailyTotal;
}

希望有所帮助:)