在span元素中使用Javascript保持運行總數

Question

我正在嘗試編寫一段應該保持運行總計的代碼。更具體地說，我想要做的是，每次點擊按鈕將小計添加到總計中時，它應該繼續添加到小計中。現在整件事的方式是，在下拉菜單中有三種食物可供選擇，每種都有自己的價格。當選擇食物項目時，用戶鍵入他們想要的項目的數量。然後，用戶單擊「添加到總計」按鈕以將食品添加到一個文本字段。在該領域之下是一個跨度，顯示總額達3.50美元的交付費用後的總和。跨度是我希望每次單擊按鈕時總計繼續添加總和的位置。我是Javascript的新手，所以我一直在努力。我也看過這裏的主題，看看我是否可以找到類似於我的問題的東西，我已經看到一些接近但不是我想要的東西。這裏的「我的代碼...

<script> 



    function myTotal() 
{ 
    var meals = document.getElementById("foodItems").value; 

    var howMany = document.getElementById("itemTotal").value; 

    var shippingCost = "3.50"; 

    var totalBill = parseFloat(meals) * howMany + parseFloat(shippingCost); 

    var addingTotal = parseFloat(meals) * howMany; 

    var runTotal = document.getElementById("runningTotal").value; 

    if (isNaN(totalBill)) { // Cash calculator 
     document.getElementById("total").value = "Invalid amount" 
     //alert("result of isNaN"); //The input amount is a non numeric string. It is or contains letters and/or spaces 
    } 
    else { //adds total to the sub total field 
     document.getElementById("total").value = "$" + parseFloat(addingTotal).toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); 
     //Convert input value into a floating point number. toFixed() requires a number value to work with 
    }//end Cash Calculator 

    var i = ""; //This piece is where I'm trying to begin the running total 

    if(i=totalBill, i=howMany*totalBill, i++){//adds delivery charge + subtotal. But doesn't keep a running total 
    document.getElementById("runningTotal").innerHTML = parseFloat(totalBill).toFixed(2); 
    } 
    else { 
    document.getElementById("runningTotal").innerHTML = parseFloat(i++) * howMany; 
    } 
} 

</script> 

<form id="survey" name="survey" method="get" action="formHandler.php" class="col-4"> 

<!-- enter your forms code below --> 

<div id="fieldset"> 
<legend>Place an Order!</legend> 

<h3>There is a $3.50 delivery fee</h3> 
<fieldset> 
    <label for="foodItems">Quick Meal Food Items</label> 
     <select name="foodItems" id="foodItems"> 
      <option value="6.00">Pepperoni Pizza - $6.00</option> 
      <option value="3.00">Bacon BBQ Burger - $3.00</option> 
      <option value="8.00">Steak and Eggs - $8.00</option> 
</fieldset> 

    <!--The "input" element has "required" in the parameters so the user must fill out all fields but the email.--> 

<fieldset> 

    <input type="text" name="itemTotal" id="itemTotal" size="25" required>How Many Orders?(Limit To 5 per Meal Type)</input> 

</fieldset> 

<fieldset> 
    <input type="button" name="click" id="button" value="Add to Order" onClick="myTotal()"> 

    <input type="text" name="total" id="total" size="25">Grand Total</input> 
<br> 
    <span id="runningTotal"></span> <!--runningTotal span--> 
</fieldset> 

    <label for="name">Name: (First, Last)</label> 
    <input type="text" name="name" id="name" size="25" required></input> 

    <label for="Address">Address</label> 
    <input type="text" name="Address" id="address" size="25" required></input> 

    <label for="email">Email</label> 
<input type="email" name="email" id="email" size="40" maxlength="40"></input> 
<br><br> 

    <label for="checkbox">Sign me up for deals via email</label> 
    <input type="checkbox" name="checkbox" id="checkbox" value="Signup" checked="checked"></input> 



<input type="submit" method="post" value="Submit" class="button"/> 
<input type="reset" value="Reset" class="button"/> 
</form> 
</div> 

任何幫助將是真棒！請解決所有的困惑吧。我想盡可能清晰，試圖得到最好的幫助，我和其他人在這裏SO。我也希望我的問題是不是題外話。就像我說的，我試圖找到有關此這裏SO東西。太謝謝你了！

Answer 1

你的意思是這樣？(jsfiddle here)

function myTotal() 
{ 
    // Error checking removed.... 

    // Calculate cost of current item 
    var itemSelect = document.getElementById("foodItems"); 
    var mealCost = parseFloat(itemSelect.value); 
    var howMany = parseInt(document.getElementById("itemTotal").value); 
    var thisItemCost = mealCost * howMany; 

    var shippingCost = 3.5; 

    // Get running total from the "total" text box 
    var runTotal = parseFloat(document.getElementById("total").value); 
    // Only add shipping cost once 
    if (isNaN(runTotal) || 0 == runTotal) runTotal = shippingCost; 
    // Add this item to total and update "total" text box 
    document.getElementById("total").value = (thisItemCost + runTotal).toFixed(2); 

    // Add item to span 
    document.getElementById("runningTotal").innerHTML += "</br>" + 
      itemSelect.options[itemSelect.selectedIndex].innerHTML + 
     " x " + howMany + 
     " .... $" + thisItemCost.toFixed(2); 
}