Can't render my items in to my html file with javascript

24 views Asked by At

HI everyone i'am having a issue in javascript I have to files in html and use one javascript for both but i'am getting this issue that it says selectors.cartItems: null

here's my code:

const renderCart = () => {
        console.log('Rendering cart...');
        console.log('selectors.cartItems:', selectors.cartItems);
        if (selectors.cartItems) {
            console.log('Cart body exists. Rendering cart items.');
            selectors.cartItems.innerHTML = cart.map(({ id, qty }) => {
                //gets products information
                const product = products.find((x) => x.id === id);
                const { title, image, price } = product;
                const amount = price * qty;

                return `
                    <div class="cart-item" data-id="${id}">
                        <img src="${image}" alt="${title}">
                        <div class="cart-item-details">
                            <h3>${title}</h3>
                            <h5>$${price}</h5>
                            <div class="cart-item-amount">
                                <i class="bi bi-dash-lg"></i>
                                <span class="qty">${qty}</span>
                                <i class="bi bi-plus-lg"></i>
                                <span class="cart-item-price">${amount}</span>
                            </div>
                        </div>
                    </div>
                `;
            }).join("");
            console.log('Cart rendered successfully.');
        }
    };

I have try many things but not work.

I want to render this items in to my shoppincart bag to mention I have to different html file one is index.html and other one is cartshop.html and have one javascripte file used in both files.

0

There are 0 answers