Fala Galera!
Tô com o seguinte erro no console do navegador:
"main.js:71 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at renderProducts (main.js:71:25) at main.js:120:1"
Diz que o erro ocorre quando uso o innerHTML, porém ja revirei a internet atrás de uma solução e nenhuma me atendeu. Estou chamando o ID corretamente, tanto no js quanto no html.
Aqui está o código, alguém consegue me auxiliar?
const productList = document.getElementById("productList");
const cartItemsElement = document.getElementById("cartItems");
const cartTotalElement = document.getElementById("cartTotal");
// Store cart Items in Local Storage
let cart = JSON.parse(localStorage.getItem("cart")) || [];
// Render Products on Page
function renderProducts() {
productList.innerHTML = products
.map(
(product) => `
<div class="product">
<img src="${product.image}" alt="${product.title}" class="product-img">
<div class="product-info">
<h2 class="product-title">${product.title}</h2>
<p class="product-price">$${product.price.toFixed(2)}</p>
<a class="add-to-cart" data-id="${product.id}">Add to Cart</a>
</div>
</div>
`
)
.join("");
}
// Render Products On Cart Page
function renderCartItems() {
cartItemsElement.innerHTML = cart
.map(
(item) => `
<div class="cart-item">
<img src="${item.image}" alt="${item.title}" />
<div class="cart-item-info">
<h2 class="cart-item-title">${item.title}</h2>
<input
class="cart-item-quantity"
type="number"
name=""
min="1"
value="${item.quantity}"
data-id="${item.id}"
/>
</div>
<h2 class="cart-item-price">${item.price}</h2>
<button class="remove-from-cart" data-id="${item.id}">Remove</button>
</div>
`
)
.join("");
}
// check if on cart page
if (window.location.pathname.includes("cart.html")) {
renderCartItems();
} else {
renderProducts();
}
renderProducts();
renderCartItems();
<section class="cart-container container">
<a href="index.html" class="back-homepage">
<i class="bx bx-chevron-left"></i>
<span>Back To Home</span>
</a>
<h2 class="cart-s-title">Shopping Cart</h2>
<div class="cart-box">
<div class="cart-data">
<div id="cartItems"></div>
</div>
<div class="cart-t">
<div id="cartTotal"></div>
<a href="#" class="checkout-btn">Checkout</a>
</div>
</div>
</section>
<section class="home" id="home">
<div class="home-img container">
<img src="images\img.png" alt="" />
</div>
</section>
<!-- Products -->
<section class="products container" id="products">
<h2 class="heading">Discover Product</h2>
<!-- products container -->
<div class="product-container" id="productList"></div>
</section>