我将我的脚本从 HTML 移到了外部 js。 但是这部分不起作用，除非我把它放在 js 文件之上，为什么？

Question

我使用这部分在 HTML 中显示和隐藏（到顶部 btn）。

// <!-- 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";
        }
    }

它在底部并且工作正常。 在我将它移动到外部 js 文件并将其原样放在脚本底部的 HTML 文件中后，它不起作用。 但是如果我把它放在外部js文件之上，它就可以正常工作了。

请帮助我理解为什么它会这样。

这里是js脚本的rest

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);

可能意味着：

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

Answer 2

没关系，伙计们，

在我删除了两个变量之后，

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

并重新启动浏览器和编辑器，突然它在底部工作，就像在 HTML 中一样。

烦人的是，我仍然不知道为什么第一次没有用？？