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

Add input value to another value as a total sum

本文关键字：添加 另一个 输入      更新时间：2023-09-26

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

片段：

$(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">

我该怎么做？:)

谢谢

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

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

在计算总价时执行此操作 

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

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

您可能

还希望在显示totalPrice时添加对.toFixed()的调用。调用 totalPrice.toFixed(2) 将确保仅显示两个小数位，以便它是货币值的正确格式。

工作示例：

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

相关文章：