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로 재설정되는 문제가 방지됩니다.

저장된 데이터를 사용해 카트를 동적으로 렌더링함으로써 사용자 경험이 더욱 향상됩니다. 이 방법을 사용하면 카트의 반응성과 대화성이 향상되고 제품 가격과 수량은 현재 사용자 상호 작용을 반영하여 업데이트됩니다.