I am making a three.js site (although I don’t think this is relevant) and have the following function:

function checkLoaded() {
    console.log('checking')
    let allAssets = document.getElementsByClassName('loadingText')

    for (let i = 0; i < allAssets.length; ++i) {
        let asset = allAssets[i]

        if (!(asset.textContent.includes("100%"))) {
            console.log(asset)
            console.log(asset.textContent)
            return
        }
    }

    let loadingText = document.getElementById('loadingText')
    loadingText.textContent = 'LOADING COMPLETE'

    let loadingMenu = document.getElementById('continue')
    loadingMenu.parentNode.appendChild(loadingMenu);
    loadingMenu.style.display = 'flex'
}

However the code after the for loop never runs.

When I expand one of the elements, <h2 id="file" class="loadingText"> I notice it shows:
​textContent: "Files 100% loaded"

I also noticed that when I copy and paste the function into the console, then run it from there, it works properly.

All attributes for this element (if relevant): https://gist.github.com/realhuman101/d4efa92d4660e1eb7b06031c982779e4

If they are relevant:
Full Javascript file: https://gist.github.com/realhuman101/75239933e82636cdf652598709d600e0
Full HTML File: https://gist.github.com/realhuman101/8f9ecc353d57a18b86d24d14ebab6a4e
Full CSS File: https://gist.github.com/realhuman101/5cb216e798ae0e7e3cf2c8fec18d52d5

Also, I am using Firefox on Windows 11, if relevant.

Is there any way I can fix this?