JS购物车页面跳转报innerHTML为null错误需手动清空localStorage求助

• 报错Uncaught TypeError: Cannot set property 'innerHTML' of null的核心原因是：localStorage中存储的购物车商品ID，在跳转至其他页面后，当前页面不存在对应ID（如div+商品ID、name+商品ID）的DOM节点，直接对查找返回的null调用innerHTML属性就会抛出异常，导致后续所有JS逻辑终止，因此出现购物车计数不更新、加购按钮失效的问题。
• 需要手动清空localStorage才能正常运行，是因为清空后购物车为空，遍历商品的逻辑不会执行，也就不会触发找不到DOM的报错。

1. 初始化逻辑添加DOM存在判断 #

页面初始化读取购物车数据时，先判断购物车计数元素是否存在，避免不存在时报错：

// 从localStorage读取购物车数据
if (localStorage.getItem('cart') == null) {
    var cart = {};
} else {
    cart = JSON.parse(localStorage.getItem('cart'));
    var cartCounter = document.getElementById('cart');
    if (cartCounter) {
        cartCounter.innerHTML = Object.keys(cart).length;
    }
    updateCart(cart);
}

2. 修复updateCart函数 #

遍历购物车修改商品数量控件时，先判断对应元素是否存在，不存在直接跳过DOM操作：

function updateCart(cart) {
    var sum = 0;
    for (var item in cart) {
        sum = sum + cart[item];
        var itemDiv = document.getElementById('div' + item);
        // 仅当前页面存在对应商品元素时才修改DOM
        if (itemDiv) {
            // 原有代码多写了一个多余的单引号，此处已同步修正
            itemDiv.innerHTML = "<button id='minus" + item + "' class='btn btn-dark minus'>-</button> <span id='val" + item + "'>" + cart[item] + "</span> <button id='plus" + item + "' class='btn btn-dark plus'> + </button>";
        }
    }
    localStorage.setItem('cart', JSON.stringify(cart));
    var cartCounter = document.getElementById('cart');
    if (cartCounter) {
        cartCounter.innerHTML = sum;
    }
    console.log(cart);
    updatePopover(cart);
}

3. 修复updatePopover函数 #

渲染购物车弹窗时，若当前页面不存在对应商品的名称元素，用兜底文本展示，避免报错：

function updatePopover(cart)
{
    console.log('We are inside updatePopover');
    var popStr = "";
    popStr = popStr + " <h5>Cart for your items in my shopping cart</h5><div class='mx-2 my-2'>";
    var i = 1;
    for (var item in cart){
        popStr = popStr + "<b>" + i + "</b>. ";
        var nameElem = document.getElementById('name' + item);
        var itemName = nameElem ? nameElem.innerHTML.slice(0,19) + "..." : "商品ID:" + item;
        popStr = popStr + itemName + " Qty: " + cart[item] + '<br>';
        i = i+1;
    }
    popStr = popStr + "</div>" 
    console.log(popStr);
    var popcartElem = document.getElementById('popcart');
    if (popcartElem) {
        popcartElem.setAttribute('data-content', popStr);
        $('#popcart').popover('show');
    }
}

4. 修复加减按钮点击逻辑 #

点击加减按钮修改数量时，先判断对应数量展示元素是否存在：

// 加减按钮点击事件逻辑
$('.divpr').on("click", "button.minus", function() {
    a = this.id.slice(7, );
    cart['pr' + a] = cart['pr' + a] - 1;
    cart['pr' + a] = Math.max(0, cart['pr' + a]);
    var valElem = document.getElementById('valpr' + a);
    if (valElem) {
        valElem.innerHTML = cart['pr' + a];
    }
    updateCart(cart);
});
$('.divpr').on("click", "button.plus", function() {
    a = this.id.slice(6, );
    cart['pr' + a] = cart['pr' + a] + 1;
    var valElem = document.getElementById('valpr' + a);
    if (valElem) {
        valElem.innerHTML = cart['pr' + a];
    }
    updateCart(cart);
});

修改完成后，即使跳转至无对应商品的其他页面，代码也会自动跳过无效DOM操作，不会抛出异常中断JS运行，购物车计数、加购按钮均可正常工作，无需再手动清空localStorage。

内容的提问来源于stack exchange，提问作者Awais Ikram