Javascript 无法理解为什么这不起作用

我不明白，在移动视图中，为什么我的汉堡包菜单onclick功能不起作用

var hamburger = document.getElementById("hamburger");

hamburger.addEventListener("click", changeImage);

function changeImage() {
    if (hamburger.src === "./images/icon-hamburger.svg") {
        hamburger.src = "./images/icon-close.svg";
        document.getElementById("hidden-nav").style.display = "block";
    }
    else {
        hamburger.src = "./images/icon-hamburger.svg";
        document.getElementById("hidden-nav").style.display = "none";
    }
}

我不知道您是否需要任何其他信息来帮助我，但这让我有点焦虑，因为我觉得代码应该可以正常工作，但实际上它没有任何功能

---

提前感谢您的帮助

您可以使用纯css来更改汉堡包样式，而不是使用图像

我在下面添加了一个汉堡和一个边栏功能

函数myFunction（x）{
var y=document.getElementById（“ham”）；
if（y.className==“容器更改”）{
y、 类列表。删除（“更改”）；
document.getElementById（“mySidenav”）.style.width=“0px”；
document.getElementById（“main”）.style.marginLeft=“0px”；
}
否则{
y、 类列表。添加（“更改”）；
document.getElementById（“mySidenav”）.style.width=“250px”；
document.getElementById（“main”）.style.marginLeft=“250px”；
}
}

.bar1、.bar2、.bar3{
宽度：35px；
高度：5px；
背景色：#333；
利润率：6px0；
过渡：0.4s；
}
.找零{
-webkit变换：旋转（-45度）平移（-9px，6px）；
变换：旋转（-45度）平移（-9px，6px）；
}
.change.bar2{opacity:0；}
.找零{
-webkit变换：旋转（45度）平移（-8px，-8px）；
变换：旋转（45度）平移（-8px，-8px）；
}
/*侧边导航菜单*/
.侧导航{
高度：100%；/*100%全高*/
宽度：0；/*0宽度-使用JavaScript更改此值*/
位置：固定；/*保持原位*/
z指数：1；/*保持在顶部*/
顶部：0；/*保持在顶部*/
左：0；
背景色：#111；/*黑色*/
溢出-x:隐藏；/*禁用水平滚动*/
填充顶部：60px；/*从顶部放置内容60px*/
转换：0.5s；/*0.5秒转换效果，在sidenav中滑动*/
}
/*导航菜单链接*/
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
/*将鼠标悬停在导航链接上时，请更改其颜色*/
.侧导航a:悬停{
颜色：#f1f1；
}
/*关闭按钮的位置和样式（右上角）*/
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
/*样式页面内容-如果要在打开侧导航时将页面内容向右推，请使用此选项*/
#主要{
过渡：左边距。5s；
填充：20px；
}
/*在高度小于450px的较小屏幕上，更改sidenav的样式（更少的填充和更小的字体大小）*/
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}

单击菜单图标将其转换为“X”：

我可以找出两种情况，首先在

标记中加载

javascript

文件（或仅在html脚本中），这会导致在页面完全加载之前加载该文件。这可能导致

文档。getElementById（“汉堡”）

未找到任何内容。为了避免这种情况，您必须将脚本推到html的末尾，并确保在页面加载所有组件后，它会自动启动

var hamburger;
addEventListener('DOMContentLoaded', ()=>{
    hamburger = document.getElementById("hamburger")
    hamburger.addEventListener("click", changeImage);
});

function changeImage() {
    if (hamburger.src === "./images/icon-hamburger.svg") {
        hamburger.src = "./images/icon-close.svg";
        document.getElementById("hidden-nav").style.display = "block";
    }
    else {
        hamburger.src = "./images/icon-hamburger.svg";
        document.getElementById("hidden-nav").style.display = "none";
    }
}

---

另一个可能的错误是你的分层html！确保添加事件侦听器的元素位于dom层的顶层。确保您的汉堡包元素位于顶层，带有

z-index

我设法解决了这个问题，使用以下代码可以完全正常工作：

var hamburger = document.getElementById("hamburger");
var hiddenNav = document.getElementById("hidden-nav");

hamburger.addEventListener("click", changeImage);


function changeImage() {
    if (hiddenNav.style.display === "none") {
        hamburger.src = "./images/icon-close.svg";
        hiddenNav.style.display = "block";
    }
    else {
        hamburger.src = "./images/icon-hamburger.svg";
        hiddenNav.style.display = "none";
    }
}

我不知道为什么和如何这是完美的运作，而另一个不是，但它已经解决了，这才是重要的

---

谢谢大家的建议。

有控制台错误吗？你有没有检查侦听器一开始是否正在运行？没有，我没有。“您是否检查了侦听器是否从一开始就在运行”-我不太明白这是否意味着开发人员工具控制台中没有任何内容，或者您没有查看开发人员工具控制台？控制台中实际上没有任何内容。我还记录了hamburger.src，它为我提供了正确的源代码，这些源代码是用HTML.Insert

console.log（hamburger）提供的行在
var hamburger=…
之后，检查此代码是否正在实际运行并打印到consoleThanks以获得建议Kal。但是我正在尝试用JS来解决这个问题，来练习JS。：）我也在用JS。请看一下代码。唯一的区别是，我没有为汉堡使用图像。汉堡包是用这一行JS-
x.classList.toggle（“change”）
切换的，谢谢你的建议！我必须去上班了，但我肯定会在下午检查z索引，因为这似乎是一个合乎逻辑的问题。