Блог

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

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

Мой код javascript таков:

 <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 (), и если я добавлю какой-то атом в корзину и перейду в другую категорию, моя кнопка «Добавить в корзину» не работает.