The window.onload function that I have on my code sometimes work but when I reload or re run the html, it stops working. I don’t know what’s the problem… Here’s my entire javascript code

const productsJsonFile = '../products.json';

// Function to fetch and display products
async function fetchProducts() {
    try {
      const response = await fetch(productsJsonFile);
      const products = await response.json();
      displayProducts(products);
    } catch (error) {
      console.error('Error fetching products:', error);
    }
  }
  
  // Function to display products
  function displayProducts(products) {
    let productContainer = document.getElementById("products");
  
    for (let product of products) {

        // Create card element
        let card = document.createElement("div");
        card.classList.add("card");

        //Card should have category and should stay hidden initially
        card.classList.add("card", product.category, "hide");
  
        // Create image container
        let imgContainer = document.createElement("div");
        imgContainer.classList.add("image-container");
  
        // Create image element
        let image = document.createElement("img");
        image.setAttribute("src", product.image);
        imgContainer.appendChild(image);
        card.appendChild(imgContainer);
  
        // Create container for product details
        let container = document.createElement("div");
        container.classList.add("container2");
  
        // Create product name element
        let name = document.createElement("h5");
        name.classList.add("product-name");
        name.innerText = product.name.toUpperCase();
        container.appendChild(name);
  
        // Create rating element
        let rating = document.createElement("div");
        rating.classList.add("rating");
  
        for (let i = 1; i <= 5; i++) {
        let starIcon = document.createElement("i");
        starIcon.classList.add("fa");
        if (i <= product.rating) {
            starIcon.classList.add("fa-star");
        } else if (i - 0.5 === product.rating) {
            starIcon.classList.add("fa-star-half-o");
        } else {
            starIcon.classList.add("fa-star-o");
        }
        rating.appendChild(starIcon);
        }
  
        container.appendChild(rating);
  
        // Create price element
        let price = document.createElement("h6");
        price.classList.add("price");
        price.innerText = "Php " + product.price + ".00";
        container.appendChild(price);
  
        card.appendChild(container);
  
        // Create anchor element
        // let anchor = document.createElement("a");
        // anchor.setAttribute("href", "#");
        // anchor.appendChild(card);
  
        productContainer.appendChild(card);
    }
}

// Fetch and display products
fetchProducts();

function filterProduct(value) {
    //Button class code
    let buttons = document.querySelectorAll(".button-value");
    buttons.forEach((button) => {
      //check if value equals innerText
      if (value.toUpperCase() == button.innerText.toUpperCase()) {
        button.classList.add("active-cat");
      } else {
        button.classList.remove("active-cat");
      }
    });
  
    //select all cards
    let elements = document.querySelectorAll(".card");
    //loop through all cards
    elements.forEach((element) => {
      //display all cards on 'all' button click
      if (value == "all") {
        element.classList.remove("hide");
      } else {
        //Check if element contains category class
        if (element.classList.contains(value)) {
          //display element based on category
          element.classList.remove("hide");
        } else {
          //hide other elements
          element.classList.add("hide");
        }
      }
    });
  }

    window.onload = () => {
        filterProduct("all");
    };

I really don’t know how to fix it no matter how many times I researched for a way. I can’t find any solution. Please help

>Solution :

My guess is – window.onload fires before your fetchProducts() does its thing.

so change the last line with this

window.onload = async () => {
    await fetchProducts();
    filterProduct("all");
};

and remove the fetchProducts(); call in the global scope.