How to add import module into class?

JavaScript
1

I made an export as follows in a file;

export const cartBtn = document.querySelector('.cart-btn')
export const closeCartBtn = document.querySelector('.close-cart')
export const clearCartBtn = document.querySelector('.clear-cart')
export const cartDOM = document.querySelector('.cart')
export const cartOverlay = document.querySelector('.cart-overlay')
export const cartItems = document.querySelector('.cart-items')
export const cartContent = document.querySelector('.cart-content')
export const productsDOM = document.querySelector('.products-center')
export let cart = []

then I used it in another file and I didn’t have any problems, but I get the following errors in my file containing Class;
(I have defined the UI class in a file called app.js)

Uncaught ReferenceError: UI is not defined

The class I want to import is as follows;

import {cartBtn,closeCartBtn,clearCartBtn,cartDOM,cartOverlay,cartItems,cartContent,productsDOM,cart} from './variables.js'
class UI {
    constructor () {
        // this.cartBtn = document.querySelector('.cart-btn')
        // this.closeCartBtn = document.querySelector('.close-cart')
        // this.clearCartBtn = document.querySelector('.clear-cart')
        // this.productsDOM = document.querySelector('.products-center')
        // this.cartDOM = document.querySelector('.cart')
        // this.cartOverlay = document.querySelector('.cart-overlay')
        // this.cartItems = document.querySelector('.cart-items')
        // this.cartContent = document.querySelector('.cart-content')
    }

    displayProducts(products) {
        console.log(cartBtn);
        let result = ''
        products.forEach(product => {
            result += `
        <article class="product">
                <div class="img-container">
                    <img class="product-img" alt="product" src="${product.image}" />
                    <button class="bag-btn" data-id="${product.id}">
                        <i class="fas fa-shopping-cart"></i>
                        add to bag
                    </button>
                </div>

                <h3>${product.title}</h3>
                <h4>${product.price} $</h4>
            </article>
        `
        })
        this.productsDOM.innerHTML = result
    }
}
2

It’s difficult to understand exactly what you’re doing here, particularly as cannot see what you’re doing with the class. But you haven’t exported it, so if you try to import it somewhere else then there’s nothing to import at the minute, so you’ll get an error

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.