JavaScript If-Else ステートメントでショッピング カート カウンターの入力要素値を正確に更新する

JavaScript ショッピング カートでの動的な製品カウンターの処理

基本的な JavaScript を使用した動的カート更新

var milo = document.getElementById('milo');
var ovaltine = document.getElementById('ovaltine');
var bournvita = document.getElementById('bournvita');
var miloPrice = 2000.00, miloCounter = 0, miloAmount = 0;
var ovaltinePrice = 1500.00, ovaltineCounter = 0, ovaltineAmount = 0;
var bournvitaPrice = 1850.00, bournvitaCounter = 0, bournvitaAmount = 0;

var cart = {}; // Object to store counters for each item

function updateCart(item, price, counterKey) {
    if (!cart[counterKey]) { cart[counterKey] = 1; } 
    else { cart[counterKey] += 1; }
    var total = cart[counterKey] * price;
    document.getElementById('cartdetails').innerHTML +=
    '<tr><td>' + cart[counterKey] + '</td><td>' + total + '</td></tr>';
}

milo.addEventListener('click', function() { updateCart('milo', miloPrice, 'miloCounter'); });
ovaltine.addEventListener('click', function() { updateCart('ovaltine', ovaltinePrice, 'ovaltineCounter'); });
bournvita.addEventListener('click', function() { updateCart('bournvita', bournvitaPrice, 'bournvitaCounter'); });

JavaScript オブジェクトを使用したカート項目の更新の処理

オブジェクトベースの状態管理での JavaScript の使用

var cartItems = {
    'milo': { price: 2000, count: 0, total: 0 },
    'ovaltine': { price: 1500, count: 0, total: 0 },
    'bournvita': { price: 1850, count: 0, total: 0 }
};

function updateCartItem(item) {
    cartItems[item].count += 1;
    cartItems[item].total = cartItems[item].count * cartItems[item].price;
    renderCart();
}

function renderCart() {
    var cartHTML = '';
    for (var item in cartItems) {
        if (cartItems[item].count > 0) {
            cartHTML += '<tr><td>' + cartItems[item].count + '</td><td>' + cartItems[item].total + '</td></tr>';
        }
    }
    document.getElementById('cartdetails').innerHTML = cartHTML;
}

document.getElementById('milo').addEventListener('click', function() { updateCartItem('milo'); });
document.getElementById('ovaltine').addEventListener('click', function() { updateCartItem('ovaltine'); });
document.getElementById('bournvita').addEventListener('click', function() { updateCartItem('bournvita'); });

JavaScript カートカウンター機能の単体テスト

テストケースでの単純な JavaScript 関数の使用

function testCartCounter() {
    var testCart = { 'milo': 0, 'ovaltine': 0, 'bournvita': 0 };
    function clickProduct(item) { testCart[item] += 1; }
    clickProduct('milo');
    clickProduct('ovaltine');
    console.assert(testCart['milo'] === 1, 'Milo should have 1 count');
    console.assert(testCart['ovaltine'] === 1, 'Ovaltine should have 1 count');
    clickProduct('milo');
    console.assert(testCart['milo'] === 2, 'Milo should have 2 counts');
    console.log('All tests passed');
}

testCartCounter();

JavaScript ショッピング カート ロジックに関するよくある質問

1. 物を移動するときにカウンターが最初からやり直さないようにするにはどうすればよいですか?
2. カウンタのリセットを回避するには、次のようなグローバル オブジェクトを使用して、各アイテムの合計と数量を個別に記録できます。 cartItems。
3. 新しい商品をカートに追加すると、以前のエントリが上書きされるのはなぜですか?
4. これは、コードがカートの元の HTML を置き換えた結果として発生します。これを修正するには、次を使用して新しいアイテムをアタッチします。 innerHTML += 既存のものを削除せずに。
5. カートを動的に更新する最善の方法は何ですか?
6. カートが常に JavaScript データで最新であることを確認するには、次のような関数を使用します。 renderCart これは、カートのすべてのアイテムを反復処理して、表示を変更します。
7. カウンタが適切に動作していることを検証するにはどうすればよいですか?
8. 問題を特定するには、次を使用します。 console.assert 各インタラクション後にカートの数が正しい値を示しているかどうかを確認します。
9. 同じコードを異なる製品に適用することはできますか?
10. はい、コードをモジュール化し、次のような関数を使用することで、最小限の変更で任意の数の商品のロジックを処理できます。 updateCart。

JavaScript でのカウンタ リセットの防止に関する最終的な考え方

動的なカートの状態をそのまま維持する秘訣は、合計やカウンターなどのアイテム固有の情報をオブジェクトに保存することです。この手法により、新しい製品が導入された場合でも、以前のアイテムが正確な値を維持できるようになります。カウンタが 1 にリセットされる問題は回避されます。

保存されたデータを使用してカートを動的にレンダリングすることにより、ユーザー エクスペリエンスがさらに向上します。この方法を使用すると、カートの応答性と対話性が向上し、製品の価格と数量が現在のユーザー インタラクションを反映して更新されます。