Javascript window.load events not triggering without using setTimeout

Question

This question pertains to a shopify cart page. I am trying to manipulate a page on load with Javascript. 'DOMContentLoaded' was not reliable enough so I am using the window.load event. The problem I am facing is, if I do not use the setTimeout function in the 'load' event, I am unable to hide the div "checkout-parameters", or even attach an eventlistener to the select tag "pickup-items". However, when I add a 2 second delay, every thing works as expected. That is, the div gets hidden as required and event listener gets attached to the select tag.

I am trying to understand if I am missing out any thing, and why I need to set a delay. Shouldn't the window.load automatically take care of everything?

The console.log lines print perfectly normally in all cases.

For extra information, the document.readyState returns 'complete'.

This is the pickup.js file.

const pickupItemsFunction= () => {
    console.log("Hi");
    let el = document.getElementById('checkout-parameters')
    console.log(el.style.display);
    el.style.display = "none";
    console.log(el.style.display);
    let selectTag = document.getElementById("pickup-items");
    selectTag.addEventListener('change', logSelectedStore);

}

const logSelectedStore = (el) => {
    let selectTag = document.getElementById("pickup-items");
    console.log(selectTag.value);


}

window.addEventListener('load', (event) => {
    console.log(document.readyState);
    setTimeout(pickupItemsFunction, 2000);
});