-1

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>

1
  • Você já fez essa pergunta faz pouco. Edite a postagem original conforme orientações deixadas lá (restaurando-a se necessário). Para evitar duplicação de informações o campo de comentários foi desativado nesta postagem, mas está disponivel na pergunta original.
    – Largato
    Commented 24/11/2023 às 22:31

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .