JavaScript Function Not Executing on Initial Page Load but Works on Window Resize (wait for el)

Question

I am working on a web page that involves moving an HTML element (hdSmElement) out of a splide carousel and turning it into a 'heading section' on smaller devices. My current setup involves dynamically adjusting the display based on the window size. The function is supposed to work immediately after the page is loaded, but it only starts working upon resizing the window. Additionally, it's important that the function waits for certain elements to be loaded (waitForElement), as splide applies its class names dynamically.

What I Want to Achieve:

Move hdSmElement out of splide on smaller devices (<1200px width), turning it into a standalone 'heading section'. Reinsert hdSmElement back into splide on larger devices. Ensure the element is moved correctly on initial page load, as well as on window resize.

Problem:

The function works correctly on window resize but does not execute on initial page load. The function also needs to wait for certain dynamic elements (handled by waitForElement), which complicates immediate execution after DOM loading.

How can I modify my JavaScript to ensure that hdSmElement is moved correctly on both initial page load and window resize, considering the dynamic nature of the elements involved? Any insights or suggestions for improving the existing script to achieve this behavior would be greatly appreciated.

    function waitForElement(selector, callback) {
        var element = document.querySelector(selector);
        if (element) {
            callback(element);
        } else {
            setTimeout(function() {
                waitForElement(selector, callback);
            }, 100); 
        }
    }

    document.addEventListener("DOMContentLoaded", function() {
        var hdSmElement = document.querySelector('.sp__h .hd__sm'); 
        var splideList = document.querySelector('.sp .splide__list'); 
        var hdElWrapper = document.querySelector('.sp__h'); 
        var wrapper = document.querySelector('.sp__wr'); 
        var originalParent = hdSmElement.parentElement;

        function moveHdSmElement() {
            console.log("Checking elements...");
            if (!hdSmElement) {
                console.error('hdSmElement not found');
                return;
            }
            if (!splideList) {
                console.error('splideList not found');
                return;
            }
            if (!wrapper) {
                console.error('wrapper not found');
                return;
            }

            if (window.innerWidth < 1200) {
                wrapper.appendChild(hdSmElement);
                splideList.append(hdElWrapper);
            } else if (window.innerWidth >= 1200) {
                originalParent.appendChild(hdSmElement);
            }
        }

        waitForElement('.sp__h .hd__sm .splide__slide__row .sp__wr', function(){
            console.log("Found element");
            moveHdSmElement();
        });
        
        window.addEventListener('resize', moveHdSmElement);
    });

Answer 1

I'm guessing the problem is that you are storing the elements on DOMContentLoaded, then referring to the same inside the callback from waitForElement. Since you are returning early in the callback, I'm guessing this is where your problem is.

    function waitForElement(selector, callback) {
        var element = document.querySelector(selector);
        if (element) {
            callback(element);
        } else {
            setTimeout(function() {
                waitForElement(selector, callback);
            }, 100); 
        }
    }

    document.addEventListener("DOMContentLoaded", function() {
        function moveHdSmElement() {
            var hdSmElement = document.querySelector('.sp__h .hd__sm'); 
            var splideList = document.querySelector('.sp .splide__list'); 
            var hdElWrapper = document.querySelector('.sp__h'); 
            var wrapper = document.querySelector('.sp__wr'); 
            var originalParent = hdSmElement.parentElement;

            console.log("Checking elements...");
            if (!hdSmElement) {
                console.error('hdSmElement not found');
                return;
            }
            if (!splideList) {
                console.error('splideList not found');
                return;
            }
            if (!wrapper) {
                console.error('wrapper not found');
                return;
            }

            if (window.innerWidth < 1200) {
                wrapper.appendChild(hdSmElement);
                splideList.append(hdElWrapper);
            } else if (window.innerWidth >= 1200) {
                originalParent.appendChild(hdSmElement);
            }
        }

        waitForElement('.sp__h .hd__sm .splide__slide__row .sp__wr', function(){
            console.log("Found element");
            moveHdSmElement();
        });
        
        window.addEventListener('resize', moveHdSmElement);
    });

Either that or you have a race condition where the selector .sp__h .hd__sm .splide__slide__row .sp__wr is found before the state of your page has normalized.

It's hard to give a proper answer without your HTML structure.

Can you create a minimal reproduction case with your JS code and a small HTML document that has the same issues?