Question

我试图编写一段应该保持运行总计的代码。更具体地说，我希望它做的是，每次单击按钮将子总数添加到总计时，它应该继续添加到小计中。现在整个过程的工作方式是，在下拉列表中有三种餐食可供选择，每种食品都有自己的价格。当选择食物项目时，用户键入他们想要的项目数量。然后，用户单击“添加到总计”按钮，将食物项添加到一个文本字段。在该字段下是一个跨度，显示在添加3.50美元的运费之后的总计。跨度是我希望运行总计在每次单击按钮时不断添加总和的位置。我是Javascript的新手，所以我一直在努力。我也在这里查看了SO的主题，看看我是否能找到与我的问题类似的东西，并且我已经看到一些接近但不完全正在寻找的东西。这是我的代码......

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

任何帮助都会很棒！请解决任何混淆。我希望尽可能清楚地试图在这里为我和其他人提供最好的帮助。我也希望我的问题不是主题。就像我说的那样，我试图在这里找到与此相关的东西。非常感谢你！

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

使用span元素中的Javascript保持运行总计

1 个答案: