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

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.