Why my javascript is showing this error, Uncaught ReferenceError: getElementsByClassName is not defined?

Question

I wanted to make a navbar, where if user clicks on open class name, it should show the elements class (items), and if the person clicks on close class name, the elements should become invisible.

And here I'm new to JavaScript, and I'm facing this error!!

Uncaught ReferenceError: getElementsByClassName is not defined at nav.html:240 (anonymous) @ nav.html:240

<!doctype html>
<html lang="en">

    <!-- HEAD OF HTML -->
  <head>

    <!-- Required Meta-tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta name="theme-color" content="#0072FF">
    <meta name="description" content="">
    <meta name="robots" content="noindex, follow">
    <!-- External CSS files -->
    <!-- <link rel="stylesheet" href="authorTeam.css"> -->
    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/5e64d08a4d.js"></script>
    <!-- IconMonstr -->
    <link href="https://cdn.iconmonstr.com/1.3.0/css/iconmonstr-iconic-font.min.css" rel="stylesheet">
    <!-- Title -->
    <title>Nav</title>

    <style>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; }

body {
    background: #E0E5EC;
    width: 100%;
}


header {
    width: 700px;
    max-width: 100%;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    transform: translate(50%,50%);
}

nav {
    height: 105px;
    width: 100%;
    background: #213140;
    box-shadow: 0px 3px 10px #444;
    z-index: 12;
    position: relative;
    margin-top: 10px;
    border-radius: 22px;
    transition: all ease 0.9s;
    overflow: hidden;
}

.container {
    padding: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.elements {
    right: 1;
}

i {
    color: #FFF;
    margin: 0 40px;
    font-size: 1.6em;
    line-height: 85px;
    /* margin-bottom: 15px; */
    cursor: pointer;
}

i:hover {
    color: #50B4F2;
    transform: scale(1.2);
    transition: 0.3s;
}

i:nth-child(3) {
    background: #50B4F2;
    padding: 15px;
    border-radius: 50%;
    color: #213140;
    cursor: default;
}

i:nth-child(3):hover {
    transform: translate(0);
    background: #6DCCF2;
    transition: linear 0.2s;
}

#active {
    color: #6DDAF2;
    cursor: default;
}

#active:hover {
    transform: translate(0);
}

.open {
    display: block;
    float: left;
    position: fixed;
    left: 0;
    margin-left: 30px;
}

.open .bars {
    width: 35px;
    height: 3px;
    background-color: #E0E5EC;
    margin: 7px 0;
    border-radius: 4px;
    cursor: pointer;
}

.elements {
    margin-right: -1000%;
}

.close {
    display: none;
    cursor: pointer;
}

.close .times-1 {
    width: 35px;
    height: 3px;
    background-color: #E0E5EC;
    margin: 7px 0 -10px 0;
    border-radius: 4px;
    transform: rotate(45deg);
}

.close .times-2 {
    width: 35px;
    height: 3px;
    background-color: #E0E5EC;
    margin: 7px 0;
    border-radius: 4px;
    transform: rotate(-45deg);
}

@media only screen and (max-width: 430px)
{
    header {
        width: 100%;
        transform: none;
    }

    nav {
        height: 90px;
        border-radius: 0;
        top: 0;
    }

    .container {
        padding: 13px;
    }

    i {
        line-height: 90px;
        font-size: 15px;
        margin: 10px 25px;
    }

    i:hover {
        transform: scale(1.2);
    }

    i:nth-child(3) {
        padding: 14px;
    }
} 

    </style>

  </head>

  <body>

    <header>
    <!-- NAVBAR -->
        <nav>
            <div class="container">

                <div class="open">
                    <div class="bars"></div>
                    <div class="bars"></div>
                    <div class="bars"></div>
                </div>

                <div class="close">
                    <div class="times-1"></div>
                    <div class="times-2"></div>
                </div>

                <div class="elements">

                    <i id="active" class="fas fa-user-tie"></i>

                    <i class="fas fa-info"></i>

                    <i class="fas fa-home"></i>

                    <i class="fas fa-phone-alt"></i>

                    <i class="fas fa-user-friends"></i>

                </div>

            </div>
        </nav>

    </header>

      <!-- JAVASCRIPT FILES -->

    <!-- JQuery -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <!-- JQuery Ajax -->
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
    <!-- External JavaScript files -->
    <script>
        console.log("Debug");

        var open = document.getElementsByClassName("open");
        var close = document.getElementsByClassName("close");
        var items = document.getElementsByClassName("elements");

            document.getElementsByClassName("open").addEventListener("click", function() {
                document.getElementsByClassName("close").style = "display: block;";
                document.getElementsByClassName("open").style = "display: none;";
                document.getElementsByClassName("elements").style = "right: 1;";
            });

            document.getElementsByClassName("close").addEventListener("onclick", function() {
                document.getElementsByClassName("close").style = "display: none;";
                document.getElementsByClassName("open").style = "display: block;";
                document.getElementsByClassName("elements").style = "right: 0;";
            });

        // function mynav() {
        //     open
        // }

        console.log("Debugging");
    </script>

  </body>
</html>

That error doesn't make a lot of sense, but the code won't work anyway because `getElementsByClassName()` returns a **list** of elements. You have to iterate through the lists and perform the updates on each individual element. — Pointy, Apr 24 '20 at 15:34
`getElementsByClassName` returns an `HTMLCollection`, which does not have an `addEventListener` or a `style` member. You need to loop, or if you know there will only be one element with the class, use `document.querySelector('.class')`. This is explained in the above duplicate question's answers. — Heretic Monkey, Apr 24 '20 at 15:36

Why my javascript is showing this error, Uncaught ReferenceError: getElementsByClassName is not defined?

0 Answers0