I moved my script from HTML to external js. But this part doesn't work unless I put it on top of js file, why?

Question

I use this part to show and hide (to top btn) in HTML.

// <!-- show (to top) btn -->
    window.onscroll = function () {
        scroll();
    };
    function scroll() {
        if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
            document.getElementById("toTopBtn-container").style.top = "96vh";
        } else {
            document.getElementById("toTopBtn-container").style.top = "110vh";
        }
    }

It was at the bottom and works normally. After I move it to an external js file and put it as it was in the HTML file at the bottom of the script, it doesn't work. But if I put it on top of the external js file, it works normally.

Help me understand why it is behaving like that, please.

Here is the rest of the js script

var menu = document.getElementById("mobile-menu");
var menuImg = document.getElementById("menuImg");
var closeMenuImg = document.getElementById("closeMenuImg");

menu.style.display = "block";
menu.style.marginLeft = "1000px";
menu.style.opacity = "1";
menuImg.style.display = "block";
closeMenuImg.style.display = "none";

function clickMenu() {

    if (menuImg.style.display == "block") {

        // btn animation
        menuImg.style.transform = "rotateZ(180deg)";
        menuImg.style.transition = "0.3s";
        // menu animation
        menu.style.marginLeft = "0";
        menu.style.opacity = "1";
        menu.style.transition = "0.5s";

        setTimeout(() => {

            menuImg.style.display = "none";
            closeMenuImg.style.display = "block";
            menu.style.display = "block";

            // untoggle animation
            menuImg.style.transform = "rotateY(0deg)";
            menuImg.style.width = "80px";
            menuImg.style.transition = "0.3s";

        }, 200);

    } else {

        // btn animation
        closeMenuImg.style.transform = "rotateZ(-180deg)";
        closeMenuImg.style.transition = "0.3s";
        // menu animation
        menu.style.marginLeft = "1000px";
        menu.style.transition = "0.4s";

        setTimeout(() => {

            menuImg.style.display = "block";
            closeMenuImg.style.display = "none";

            // untoggle animation
            closeMenuImg.style.transform = "rotateY(0deg)";
            closeMenuImg.style.width = "80px";
            closeMenuImg.style.transition = "0.3s";

        }, 200);

    }
}


var mobileWorkBtn = document.getElementById(mobile - work - btn);
var mobileContactBtn = document.getElementById(mobile - contact - btn);

function clickMobileMenuItem() {

    // btn animation
    closeMenuImg.style.transform = "rotateZ(-180deg)";
    closeMenuImg.style.transition = "0.3s";
    // menu animation
    menu.style.marginLeft = "1000px";
    menu.style.transition = "0.4s";

    setTimeout(() => {

        menuImg.style.display = "block";
        closeMenuImg.style.display = "none";


        closeMenuImg.style.transform = "rotateY(0deg)";
        closeMenuImg.style.width = "80px";
        closeMenuImg.style.transition = "0.3s";

    }, 200);
}

Answer 1

var mobileWorkBtn = document.getElementById(mobile - work - btn);
var mobileContactBtn = document.getElementById(mobile - contact - btn);

is probably meant to be:

var mobileWorkBtn = document.getElementById("mobile-work-btn");
var mobileContactBtn = document.getElementById("mobile-contact-btn");

Answer 2

never mind guys,

after I removed the two variables,

var mobileWorkBtn = document.getElementById(mobile - work - btn);
var mobileContactBtn = document.getElementById(mobile - contact - btn);

and restart the browser and editor, suddenly it works on the bottom as it was in HTML.

the annoying part is, I still don't know why it didn't work first time !?