Toggle CSS Classes using JavaScript - Error

Question

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

<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

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:

Console

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

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

What should I do? Thank You For Your Attention!

Your call to addEventListener is incorrect. You're passing the result of calling class() instead of just a reference to the function (clas without the ()). — Pointy
– Pointy, Commented Jul 26, 2018 at 12:44
Ok thanks I changed to what you said. But the error still remains appearing — Arch
– Arch, Commented Jul 26, 2018 at 12:48

Suraj Rao · Accepted Answer · 2018-07-26 12:45:36Z

4

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

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

edited Jul 26, 2018 at 12:45

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Jul 26, 2018 at 12:44

Programmer

2,1231 gold badge13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Arch Over a year ago

Thanks the error has gone, but it still doesn't work. Any Idea?

Programmer Over a year ago

You need to debug it step by step. Do you get the element you want in burger? Does the toggle() really toggles the class 'open'? If so, maybe there is something wrong in your css.

Arch Over a year ago

I tried console.log("OK") to test if the functions are running and they aren't being called

Anas Bzr Amma · Accepted Answer · 2018-07-26 12:49:31Z

1

burger returns a collection so you should do something like

for (let i = 0; i < burger.length; i++) { burger[i].classList.toggle("open"); }

answered Jul 26, 2018 at 12:49

Anas Bzr Amma

366 bronze badges

1 Comment

Arch Over a year ago

Thanks the error has gone, but it still doesn't work. Any Idea?

Arch · Accepted Answer · 2018-07-26 14:24:58Z

0

Ok after some research and a lot of attempts to solve the problem I finally got it. This is my final JavaScript Code:

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");
    }

}

Thanks to Everyone who helped me! I appreciated It a lot!

edited Jul 26, 2018 at 14:24

answered Jul 26, 2018 at 13:50

Arch

10912 bronze badges

Collectives™ on Stack Overflow

Toggle CSS Classes using JavaScript - Error

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related