为什么我的 JS 移动导航在我的所有页面上都有效，但只有一个？

Question

我正在建立一个网站，并且我有一个由 JS 控制的移动下拉菜单（对于 400 像素以下的设备，它会与 @media 查询一起出现）。我的网站是 jeffarries.com（我正在谈论的页面就在那里），移动导航适用于我的所有其他页面，但不适用于我的 Politics 页面。不起作用的是打开和关闭导航下拉菜单的栏不旋转并且 body 未设置为 position: fixed;。为什么我的 JS 在我的所有页面上都有效，但 Politics?

谢谢！

P.S。我可以提供代码，但它有 250 多行并且在不同的文件中，所以我认为最好在我的网站上查看它。 （我不是想偷懒，所以如果你想要代码，尽管问我会提供）

Answer 1

为什么我的 JS 移动导航在我的所有页面上都有效，但只有一个？

因为你有一个javascript错误！

检查您的浏览器控制台，您会看到它：

TypeError: null 不是对象（正在计算 'document.getElementById("javascript_warning").style'）

如果您查看 politics.js 文件的第 331 行，您将看到以下函数：

// Hides javascript warning message
function myFunction() {
    document.getElementById("javascript_warning").style.display = "none";
}

这是导致错误的原因，因为 document.getElementById("javascript_warning") 为 null，而您正试图对其调用样式。

确保元素首先存在，例如

// Hides javascript warning message
function myFunction() {
    var elem = document.getElementById("javascript_warning");
    if (elem != null) {
        elem.style.display = "none"
    }
};

Answer 2

快速解决方法是：

删除此行

var body = document.getElementsByTagName("BODY")[0];

将这些行中的 'body' 替换为 'document.body'：

body.style.position = "fixed";
body.style.position = "";

您还应更正控制台中出现的其他错误。