Question 182501 in Html Question posted in
Some basic documentation can be found here.

Html – My window.onload doesn't work sometimes. How do I make it work?

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

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    The window.onload function is used to execute a function once the entire page (including all its resources) has finished loading. It ensures that the code inside the function is only executed when the page is fully loaded.

    In your code, you’re using window.onload to call the filterProduct("all") function, which filters and displays products based on the provided value. However, you mentioned that sometimes it works, but when you reload or rerun the HTML, it stops working.

    One possible reason for this issue could be that the JavaScript code is executing before the HTML elements are loaded into the DOM. To fix this, you can use the DOMContentLoaded event instead of window.onload. The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed without waiting for stylesheets, images, and subframes to finish loading.

    Here’s how you can modify your code to use the DOMContentLoaded event:

    document.addEventListener("DOMContentLoaded", () => {
  filterProduct("all");
});

    By using document.addEventListener("DOMContentLoaded", ...), you ensure that the filterProduct("all") function is called once the HTML document has finished loading, and all the required elements are available in the DOM.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search