Here is my code for onload event:

let statElements = []; 
let data = [];
const dailyBtn = document.getElementById("daily");
const weeklyBtn = document.getElementById("weekly");
const monthlyBtn = document.getElementById("monthly");
async function fetchDataAndProcess() {
    try {
        const response = await fetch("data.json");
        data = await response.json();

        const sections = document.querySelectorAll("section.card");

        sections.forEach((section, index) => {
            const title = data[index].title.toLowerCase();
            const h2Element = section.querySelector(`h2.${title}-stats`);
            const pElement = section.querySelector(`p.${title}-stats`);

            statElements.push({
                h2: h2Element,
                p: pElement
            });
        });
    } catch (error) {
        console.error("Error fetching or processing data:", error);
    }
}
fetchDataAndProcess();
function weekly() {
    statElements.forEach((element, index) => {
        element.h2.textContent = `${data[index].timeframes.weekly.current}hrs`;
        element.p.textContent = `Last Week - ${data[index].timeframes.weekly.previous}hrs`;
    });
    weeklyBtn.style.color = "white";
    monthlyBtn.style.color = "hsl(235, 45%, 61%)";
    dailyBtn.style.color = "hsl(235, 45%, 61%)";
}
window.onload =  weekly;

Basically what this is supposed to do is retrieve h2 and p elements from each section and set their textcontent to the data in the json object. The problem I am having is sometimes, it is working, sometimes, it seems not to have been executed because I don’t see the contents of my h2 and p have been filled. So, I am wondering if it is because of using async function or using onload event. Maybe i should use something else?

I changed the window event to DOMContentLoaded, nothing changed. I changed the window event by adding event listener load, still the problem did not disappear.