'JavaScript can't read my toggle (it shows an error) [closed]

When I try To function the hamburger using the code:

burger = document.querySelector('.burger')
navbar = document.querySelector('.navbar')
navlist = document.querySelector('.nav-list')


burger.addEventListener('click', ()=>{
navbar.ClassList.toggle('v-class-resp');
nav-list.classlist.toggle('v-class-resp');

})

It show me the error Can't read toggle (reading 'toggle).

Here is the html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Home.css">
    
    <title>SG Network</title>
    
</head>
<body  >
    
    <nav class="navbar background h-nav-resp" >
        <ul class="nav-list v-class-resp">
            <div class="logo" style="border: 60px;"> <img src="Add a heading.jpg" alt="Logo"> </div>
            <li> <a href="#HomePage">HomePage</a></li>
            <li> <a href="#About us">About us</a></li>
            <li> <a href="#Buy-Ranks">Buy Ranks</a></li>
            <li> <a href="#Donate">Donate</a></li>
            <li> <a href="#Vote">Vote</a></li>
            <li> <a href="#Discord">Discord</a></li><h1></h1>
        </ul>
        <div class="burger">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
        </div>
    </nav>
    <section class="firstsection background">
<div class="box background">
<div class="firsthalf "> <p class="text-big">SG NetWork Is A Network blah blah blah blah blah vlah vlah
     vlah blah vlah vlah blah vlah vlah blah vlah vlah blah vlah vlah blah vlah vlah blah vlah
      vlah blah vlah vlah blah vlah vlah blah vlah vlah blah 

            
</p>
<div class="button">
    <button class="btn">Vote</button>
    <button class="btn">Discord</button>
</div>
 </div>
<div class="secondhalf ">

    
</div>
</div>

<p>
    <footer class="foot background">Copyright &copy; All Rights Reserverd</footer>
    </p>

    <script src="resp.js">
    </script>
</body>
</html>

Image:

enter image description here

What can I try to resolve this?

javascripthtml


Solution 1:[1]

JavaScript is a case-sensitive language, meaning you can't type ClassList, you can't type classlist, you have to type classList. Also, you can't type nav-list.classList, you have to type navlist.classList because you defined it as navlist, not nav-list and - is not allowed in variable names.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Yugoslav Empire

Related Questions