How to Reach JavaScript Class from HTML File?

For example, there is a shopping-page where everything works fine until adding a search function.

Read also about Double Arraylist Java

In the example the JavaScript file is built with classes such as:

• Products{getProducts},
• UI{displayProducts},
• Storage{saveProducts}
• DOMContentLoaded

The correct order is get the products (from a JSON-file), store the products in local-storage and get them from the local-storage when they are needed.

In the HTML file it is possible to choose the category of products via buttons onclick => performTask.

Since I haven’t found out how to enter the UI {displayProducts} (which is really what I want, since that’s the only thing that should really happen when a button is pressed – show the correct products) – I have made a new function in my js-file. This function works very much as the DOMContentLoaded and at first, it seems it’s working really well…. Until restarting the app for a couple of times and try to change a number of products in the cart or remove all items in the cart.

For example if you want to add an extra copy of an item already in the cart, the value will not be added by one, but with one plus all the items in the cart. When trying to remove all the items in the cart, you will have to do it as many times as you have restarted and added things to the app.

Here is the code:

class Products {
    async getProducts(){
        try{
            const res = await fetch('/data/products.json');
            const data = await res.json();
            let products = data.items;
            products = products.map(item => {
                const {id,category,title,color,price} = item;
                const image = item.image.url;
                return {id,category,title,color,price,image}
            })
            return products;
        }catch(err){
            console.log(err)
        }
    }
}
class UI {
    displayProducts(products){
        // This is where the products get displayed
    }
}
class Storage {
  static saveProducts(products) {
    localStorage.setItem("products", JSON.stringify(products));
  }
  static getProduct(id) {
    let products = JSON.parse(localStorage.getItem("products"));
    return products.find((product) => product.id === id);
  }
  static saveCart(cart) {
    localStorage.setItem("cart", JSON.stringify(cart));
  }
  static getCart() {
    return localStorage.getItem("cart")
      ? JSON.parse(localStorage.getItem("cart"))
      : [];
  }
}

document.addEventListener('DOMContentLoaded',()=>{
  const ui = new UI();
  const products = new Products();
  ui.setupAPP();
  products
    .getProducts()
    .then((products) => {
      ui.displayProducts(products);
      Storage.saveProducts(products);
    })
})

The HTML is as follows:

<ul class="dropdown">
    <li class="category-button" onclick="displaySearch(new UI, new Products, 'beds')"><a href="#hidden">beds</a></li>
    <li class="category-button" onclick="displaySearch(new UI, new Products, 'sofas')"><a href="#hidden">sofas</a></li>
    <li class="category-button" onclick="displaySearch(new UI, new Products, 'dressers')"><a href="#hidden">dressers</a></li>
    <li class="category-button" onclick="displaySearch(new UI, new Products, 'news')"><a href="#hidden">news</a></li>
</ul>

Click here to view original web page at stackoverflow.com