将输入值添加到另一个值作为总和

I'm creating a budget app where the user can put in a product and a price. I want it to display the total cost by adding each input value (HTML5 type=number) to the next number that is put in with the next added line.

我正在创建一个预算应用,用户可以在其中投放产品和价格。我希望它通过将每个输入值(HTML5类型=数字)添加到下一个添加的行中输入的数字来显示总成本。

Snippet:

$(document).ready(function() {

  $('.food').click(function() {
    var $frm = $(this).parent();
    var toAdd = $frm.children(".productInput").val();
    var addPrice = $frm.children(".priceInput").val();
    var addAmount = $frm.children(".amountInput").val();


    var div = $("<div>");
    div.append("<p>" + addAmount + "</p>", "<p id='product'> " + toAdd + " </p>", "<p>" + addPrice + "</p>");

    $frm.parent().children(".messages").append(div);

    $(".totalPrice").text("Total Price" + addAmount * addPrice);

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="menu">
  <h3>Shopping list</h3>
  <div class="line">
    <div>
      <input class='amountInput' type='number' name='quantity' min='0' max='1000' step='1'>
      <input class='productInput' type="text" name="message" value="">
      <input class='priceInput' type='number' name='quantity' min='0' max='1000000' step='0.01'>
      <button class="food">Add</button>
    </div>
    <div class="messages">
    </div>
  </div>
</div>
<div class="totalPrice">

How can I do this? :)

我怎样才能做到这一点? :)

Thanks

2 个解决方案

#1

Declare a global variable outside your function

在函数外声明一个全局变量

$(document).ready(function() {

var totalPrice=0;

$('.food').click(function() {
..

do this while calculating total price

在计算总价时这样做

totalPrice = totalPrice + (addAmount * addPrice);
$(".totalPrice").text("Total Price" + totalPrice);

#2

Create a totalPrice variable outside of your click function. Then add your addAmount * addPrice to the totalPrice every time you add a new item. Then display the totalPrice in your .totalPrice div instead of the addAmount * addPrice of the last added item.

在click函数之外创建一个totalPrice变量。然后在每次添加新项目时将addAmount * addPrice添加到totalPrice。然后在.totalPrice div中显示totalPrice,而不是最后添加的项的addAmount * addPrice。

You may also want to add a call to .toFixed() on your totalPrice when displaying it. Calling totalPrice.toFixed(2) will ensure that you display only two decimal places, so that it's a proper format for monetary values.

您可能还希望在显示它时在totalPrice上添加对.toFixed()的调用。调用totalPrice.toFixed(2)将确保只显示两个小数位,这样它就是货币值的正确格式。

Working example:

$(document).ready(function() {
  
  var totalPrice = 0;

  $('.food').click(function() {
    var $frm = $(this).parent();
    var toAdd = $frm.children(".productInput").val();
    var addPrice = $frm.children(".priceInput").val();
    var addAmount = $frm.children(".amountInput").val();


    var div = $("<div>");
    div.append("<p>" + addAmount + "</p>", "<p id='product'> " + toAdd + " </p>", "<p>" + addPrice + "</p>");

    $frm.parent().children(".messages").append(div);
    
    totalPrice += addAmount * addPrice;

    $(".totalPrice").text("Total Price: $" + totalPrice.toFixed(2));

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <h3>Shopping list</h3>
  <div class="line">
    <div>
      <input class='amountInput' type='number' name='quantity' min='0' max='1000' step='1'>
      <input class='productInput' type="text" name="message" value="">
      <input class='priceInput' type='number' name='quantity' min='0' max='1000000' step='0.01'>
      <button class="food">Add</button>
    </div>
    <div class="messages">
    </div>
  </div>
</div>
<div class="totalPrice"></div>

#1