使用JavaScript切换CSS类-错误

我试着制作一个脚本，当用户点击一个带有类“burger nav img”的图像时，它会在另一个元素中切换类“open”。我的代码是：

HTML

问题是，当我运行此代码时，会出现一个错误，我无法确定该怎么做：

控制台

注意：menu.js是包含JavaScript代码的文件

我该怎么办？

---

谢谢你的关注

getElementsByClassName

返回一个元素数组，而数组没有classList属性，因此无法定义

---

使用

burger[0].classList

或使用返回单个元素的Id和

getElementById

。

getElementsByClassName

返回元素数组，而数组没有classList属性，因此未定义

---

使用

burger[0]。classList

或使用返回单个元素的Id和

getElementById

。

burger

返回一个集合，因此您应该执行以下操作

for（设i=0；i}

burger

返回一个集合，因此您应该执行以下操作

for（设i=0；i}

好的，经过一些研究和多次尝试解决这个问题，我终于找到了答案。 这是我最后的JavaScript代码：

document.getElementById("burger").onclick = toggl;

function toggl() {
    console.log("OK");
    var burger = document.getElementById("burger-nav");
    var main = document.getElementById("main-nav");
    if (burger.classList.contains("open")) {
        console.log("OKEY-DOKEY");
        burger.classList.remove("open");
        main.classList.remove("open");
    } else {
        console.log("OK-OK");
        burger.classList.add("open");
        main.classList.add("open");
    }

}

---

谢谢所有帮助我的人！我非常感激

好的，经过一些研究和多次尝试，我终于找到了答案。 这是我最后的JavaScript代码：

document.getElementById("burger").onclick = toggl;

function toggl() {
    console.log("OK");
    var burger = document.getElementById("burger-nav");
    var main = document.getElementById("main-nav");
    if (burger.classList.contains("open")) {
        console.log("OKEY-DOKEY");
        burger.classList.remove("open");
        main.classList.remove("open");
    } else {
        console.log("OK-OK");
        burger.classList.add("open");
        main.classList.add("open");
    }

}

---

谢谢所有帮助我的人！我非常感激

切换函数中传递的“打开”是什么？您对

addEventListener

的调用不正确。您正在传递调用

class（）

的结果，而不仅仅是对函数（

clas

的引用，没有

（）

）的引用。“open”是我要切换的类的名称。好的，谢谢，我更改了您所说的内容。但是错误仍然存在。切换函数中传递的“打开”是什么？您对

addEventListener

的调用不正确。您正在传递调用

class（）

的结果，而不仅仅是对函数（

clas

的引用，没有

（）

）的引用。“open”是我要切换的类的名称。好的，谢谢，我更改了您所说的内容。但是错误仍然存在。如果错误已经消失，但仍然不起作用。有什么想法吗？你需要一步一步地调试它。您是否在

汉堡

中获得了想要的元素？

toggle（）

真的会将类切换为“打开”吗？如果是这样的话，可能你的css有问题。我尝试了console.log（“OK”）来测试函数是否正在运行并且没有被调用。如果错误已经消失，但仍然不起作用。有什么想法吗？你需要一步一步地调试它。您是否在

汉堡

中获得了想要的元素？

toggle（）

真的会将类切换为“打开”吗？如果是这样的话，可能你的css有问题。我尝试了console.log（“OK”）来测试函数是否正在运行并且没有被调用。如果错误已经消失，但仍然不起作用。有什么想法吗？谢谢，错误已经消失了，但仍然不起作用。有什么想法吗？

menu.js:7 Uncaught TypeError: Cannot read property 'toggle' of undefined
    at toggl (menu.js:7)
    at clas (menu.js:3)
    at menu.js:1
toggl @ menu.js:7
clas @ menu.js:3
(anonymous) @ menu.js:1

document.getElementById("burger").onclick = toggl;

function toggl() {
    console.log("OK");
    var burger = document.getElementById("burger-nav");
    var main = document.getElementById("main-nav");
    if (burger.classList.contains("open")) {
        console.log("OKEY-DOKEY");
        burger.classList.remove("open");
        main.classList.remove("open");
    } else {
        console.log("OK-OK");
        burger.classList.add("open");
        main.classList.add("open");
    }

}