Javascript 为什么只有JS文件顶部的事件侦听器工作？

下面的代码打开和关闭两个简单的菜单-团队消息框和导航

现在只有“团队消息框”可以工作，但如果我先放置“滑出导航”，它就会开始工作，团队消息框就会停止工作。为什么会这样

//team message box, open and close
let teamMessageDeliveryOpenBtn = document.getElementById("teamMessageDeliveryOpenBtn"),
    teamMessageDeliveryCloseBtn = document.getElementById("teamMessageDeliveryCloseBtn"),
    teamMessageDeliveryBox = document.getElementById("teamMessageDeliveryBox");

teamMessageDeliveryOpenBtn.addEventListener("click", openTeamMessageBox, false);
teamMessageDeliveryCloseBtn.addEventListener("click", closeTeamMessageBox, false);

function openTeamMessageBox() {
    "use strict";
        teamMessageDeliveryBox.style.height = "50rem";
        teamMessageDeliveryBox.style.visibility = "visible";
}
function closeTeamMessageBox() {
    "use strict";
        teamMessageDeliveryBox.style.height = "0";
        teamMessageDeliveryBox.style.visibility = "hidden";
}


//slide out navigation
let navButton = document.getElementById("navButton"),
    navBar = document.getElementById("navBar");

navButton.addEventListener("click", navOpenClose, false);

function navOpenClose() {
    "use strict";
    if (navBar.style.height === "20rem") {
        navBar.style.height = "0";
    } else {
         navBar.style.height = "20rem";
    }
}

---

我找到了问题的答案。问题不是js文件中的每个ID都在每个html页面上。因此，根据我正在查看的页面，js会抛出一个未捕获的类型错误，因为它找不到一个元素ID。

我找到了问题的答案。问题不是js文件中的每个ID都在每个html页面上。因此，根据我查看的页面，js会抛出一个未捕获的TypeError，因为它找不到一个元素ID。

您必须使用调试器来查看实际情况，但我发现您没有使用类，这总是会带来问题。我非常感谢您的反馈，也许我会尝试将其放入类中。您必须使用调试器来查看实际情况，但我发现您没有使用类，这总是会带来问题。我非常感谢您的反馈，也许我会尝试将其放入类中。创建

function id_Uid{return（（document.getElementById（id））？document.getElementById（id）：false）；}

然后使用

if（id（“teamMessageDeliveryOpenBtn”）{}

。我认为这会起作用，但是我最终在每个页面的body标记中添加了类，然后使用这个：if（document.body.classList.contains（'main_navigation_available'））检查类的存在性{我想在这里执行的代码}在

body

元素中，使用术语标记几乎总是不合适的。而且

body

元素应该总是这样：

：没有属性。我从零开始就创建了一个完整的web平台，没有使用第三方框架或库，最坏的情况是速度快2.5倍，快24倍以上。检查DOM在我的个人资料中链接的站点上，查看代码和文档。如果有更好的教程站点，为什么要从零开始学习呢？：-）创建

function id_u2;（id）{return（（document.getElementById（id））？document.getElementById（id）：false）；}

然后使用

if（id_2;（'teamMessageDeliveryOpenBtn'）{}

。我认为这是可行的，但是我最终在每个页面的body标记中添加了类，然后使用以下命令检查类是否存在：if（document.body.classList.contains（'main\u navigation\u available'）{我想在这里执行的代码}在

body

元素中，使用术语标记几乎总是不合适的。而且

body

元素应该总是这样：

：没有属性。我从零开始就创建了一个完整的web平台，没有使用第三方框架或库，最坏的情况是速度快2.5倍，快24倍以上。检查DOM在我个人资料中链接的站点上，查看代码和文档。如果有更好的教程站点，为什么要从零开始学习或从糟糕的教程站点学习呢？：-）