入力値を別の値に合計として追加する

Question

私はユーザーが商品と価格を入力できる予算アプリケーションを作成しています。次の行に追加された次の番号に各入力値（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">

私はこれをどのように行うことができますか？ :)

おかげ

Answer 1

は

$(document).ready(function() { 

var totalPrice=0; 

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

これを行う、あなたの関数の外でグローバル変数を宣言し

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

Answer 2

あなたのクリック機能の外totalPrice変数を作成します。次に、新しいアイテムを追加するたびにaddAmount * addPriceをtotalPriceに追加します。最後に追加した項目のaddAmount * addPriceの代わりに.totalPrice divにtotalPriceと表示します。

totalPriceの電話番号を.toFixed()に追加することもできます。 totalPrice.toFixed(2)を呼び出すと、小数点以下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>