Почему мне нужно очищать локальное хранилище вручную из консоли. Каждый раз, когда мой сайт загружается

Я сделал корзину и сделал функцию обновления корзины в JavaScript, которая работает нормально, но когда я перехожу на другую страницу, моя корзина автоматически переходит в состояние (1 ) и в консоли появляется ошибка следующего вида:

Uncaught TypeError: Cannot set property 'innerHTML' of null
at updateCart ((index):447)
at (index):411

Мой код java script таков:

<script>
// Find out the cart items from localStorage
if (localStorage.getItem('cart') == null) {
var cart = {};
} else {
cart = JSON.parse(localStorage.getItem('cart'));
document.getElementById('cart').innerHTML = Object.keys(cart).length;
updateCart(cart);
}
// If the add to cart button is clicked, add/increment the item
$('.cart').click(function() {
var idstr = this.id.toString();
if (cart[idstr] != undefined) {
    cart[idstr] = cart[idstr] + 1;
} else {
    cart[idstr] = 1;
}
updateCart(cart);

});
//Add Popover to cart
$('#popcart').popover();
updatePopover(cart);
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>. ";
    popStr = popStr + document.getElementById('name' + item).innerHTML.slice(0,19) + "... Qty: 
" + cart[item] + '<br>';
    i = i+1;
}
popStr = popStr + "</div>" 
console.log(popStr);
document.getElementById('popcart').setAttribute('data-content', popStr);
$('#popcart').popover('show');
}
function updateCart(cart) {
var sum = 0;
for (var item in cart) {
    sum = sum + cart[item];
    document.getElementById('div' + item).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));
document.getElementById('cart').innerHTML = sum;
console.log(cart);
updatePopover(cart);
}
// If plus or minus button is clicked, change the cart as well as the display value
$('.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]);
document.getElementById('valpr' + a).innerHTML = cart['pr' + a];
updateCart(cart);
});
$('.divpr').on("click", "button.plus", function() {
a = this.id.slice(6, );
cart['pr' + a] = cart['pr' + a] + 1;
document.getElementById('valpr' + a).innerHTML = cart['pr' + a];
updateCart(cart);
});
</script>

После этой ошибки каждый раз мне нужно очистить хранилище в консоли, набрав localstorage.clear(), и если я добавляю какой-то атом в корзину и перехожу в другую категорию, моя кнопка добавления в корзину не работает.

Вернуться на верх