使用JavaScript切换CSS类-错误 [英] Toggle CSS Classes using JavaScript - Error

问题描述

我正在尝试编写一个脚本，当用户单击带有"burger-nav-img"类的图像时，它将在另一个元素中切换打开"类.我的代码是:

I'm trying to make a Script that when a user clicks in an image with the class "burger-nav-img" it toggles the class "open" in another elements. My code is:

HTML

HTML

<nav class="main-nav">
    <ul class="flex-container">
        <li class="flex-content"><a href="#">Home</a></li>
        <li class="flex-content"><a href="#">Articles</a></li>
        <div class="logo_container flex-container">
            <img src="img\logo_background.png" class="logo flex-content">
        </div>
        <li class="flex-content"><a href="#">Support</a></li>
        <li class="flex-content"><a href="#">Login</a></li>
    </ul>
<a class="burger-nav">
    <img src="img/menu.png" id="burger" class="burger-nav-img">
</a>

JavaScript

JavaScript

document.body.addEventListener("load", clas);
function clas() {
    document.getElementsByClassName("burger-nav-img").addEventListener("load", toggl);
}
function toggl() {
    const burger = document.getElementsByClassName("burger-nav");
    burger.classList.toggle("open");
    const main = document.getElementsByClassName("main-nav");
    main.classList.toggle("open");
}

问题是，当我运行此代码时，出现错误并且我不知道该怎么做:

The problem is that when I run this code an error appears and I can't figure out what to do:

控制台

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

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

Note: menu.js is the file containing the JavaScript Code;

我该怎么办? 谢谢您的关注！

What should I do? Thank You For Your Attention!

推荐答案

getElementsByClassName返回元素数组，并且该数组不具有classList属性，因此您未定义.

getElementsByClassName returns an array of elements, and an array doesn't have classList property, and therefore you get undefined.

使用burger[0].classList或使用返回单个元素的ID和getElementById.

Use burger[0].classList or use an Id and getElementById that returns a single element.

这篇关于使用JavaScript切换CSS类-错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！