合計金額が1行のみで計算される理由

Question

申し訳ありませんが、これは単なる問題です。問題は、合計金額が1行しか計算していないことです。クリックされた特定の製品の行が1つだけ計算されます。では、すべての行から合計金額を計算する方法は？

const cart = {}; 
 
let GrandTotal = 0; 
 

 
function AddtoCart(productid, description, quantity, price) { 
 
    if (cart[productid]) { 
 
    cart[productid].qty += quantity; 
 
    } else { 
 
    cart[productid] = { 
 
     id: productid, 
 
     desc: description, 
 
     qty: quantity, 
 
     price: price 
 
    }; 
 
    } 
 
    
 
    viewCart(); 
 
    
 
    
 
    GrandTotal += parseFloat(cart[productid].price) * parseInt(cart[productid].qty); 
 
    document.getElementById("total").innerHTML = GrandTotal; 
 
    console.log(GrandTotal); 
 
    
 
    } 
 

 
function viewCart() { 
 
    let tbody = document.getElementById('cartsBody'); 
 
    tbody.innerHTML = ''; 
 
    Object.values(cart).forEach(content => { 
 
    tbody.innerHTML += `<td>${ content.id }</td> 
 
         <td>${ content.desc }</td> 
 
         <td>${ content.qty }</td> 
 
         <td>${ content.price }</td> 
 
         <td>${ content.qty * content.price }</td>`; 
 

 

 
    }); 
 
    
 
}

<script src="script.js"></script> 
 

 
<input type="button" value="Laptop" onclick="AddtoCart('132','Macbook Pro', 1, 79000,0)" /> 
 
<input type="button" value="Phone" onclick="AddtoCart('456','Iphone 5S', 1, 18000,0)" /> 
 
<input type="button" value="Camera" onclick="AddtoCart('789','Nikon 3D00', 1, 25000,0)" /> 
 

 
<table border="1|1" id="cartsTable"> 
 
    <thead> 
 
    <tr> 
 
     <th>Product ID</th> 
 
     <th>Product Description</th> 
 
     <th>Quantity</th> 
 
     <th>Price</th> 
 
     <th>Total</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody id="cartsBody"> 
 
    </tbody> 
 
</table> 
 
<p id="total">Total: </p>

Answer 1

商品をクリックするたびに追加するのではなく、毎回カートデータから総計を再計算します。後でアイテムを削除することもできます。

function calculateGrandTotal(){ 
    GrandTotal = 0; 
    for(let productid in cart){ 
     if(cart.hasOwnProperty(productid)){ 
      GrandTotal += parseFloat(cart[productid].price) * parseInt(cart[productid].qty); 
     } 
    } 
} 

そして、あなたのAddToCart機能であなただけの計算関数を呼び出す：あなたは常に一つだけを追加する代わりに、総計に選ばれたタイプのすべての製品の合計を追加

function AddtoCart(productid, description, quantity, price) { 
    // [...] 
    calculateGrandTotal(); 
    document.getElementById("total").innerHTML = GrandTotal; 
    console.log(GrandTotal); 
} 

Answer 2

addToCartがクリックされるたびに、あなたはゼロにgrandtotal設定。

クリック機能の外にあなたのgrandtotal変数を初期化します。