在 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 中计数器重置的最终想法

保持动态购物车状态完整的秘诀是将特​​定于项目的信息（例如总数和计数器）保存在对象中。即使引入新产品，该技术也可确保先前的项目保持其准确值。避免了计数器重置为一的问题。

通过使用存储的数据动态呈现购物车，进一步改善了用户体验。通过使用此方法，购物车变得更具响应性和交互性，并且产品定价和数量会更新以反映当前的用户交互。