My toggle button will not switch from left to right, I have coded in JavaScript and cannot find the bug?

First someone suggested it was a typo with my classList property and I made the necessary changes but it still is not working. I have js node downloaded but it still is not responding. Can anyone help? I cant yet find the bug i need some extra help. I have posted my css javascript and html files below Here is my work..

var btn = document.getElementById("btn");

function togglebtn() {
  btn.classList.toggle(".active");
}

*{
    margin: 0;
    padding: 0;
    font-family: 'poppins', sans-serif;
    box-sizing: border-box;

}
.hero{
    background: #1d2026;
    min-height: 100vh;
    width: 100%;
    color: #fff;
    position: relative;

}

nav{
    display: flex;
    align-items: center;
    
}
nav .menu{
    padding-right: 30px;
    padding-left: 10px;
    padding-bottom: 40px;
    cursor: pointer;
}

nav .logo{
     width: 500px;
     height: 200px;
     object-fit: none;
     padding-right: 50px;
     padding-bottom: 60px;


}
nav ul{
    flex: 1;
    text-align: right;
    margin-right: 20px;

}

nav ul li{
    display: inline-block;
    list-style: none;
    margin-right: 20px;
    padding-bottom: 100px;
    font-size: 25px;
    margin: 0 20px;
    
}
nav ul a{
    text-decoration: none;
    color: #fff;

}
nav button{
    background: #efefef;
    height:30px ;
    width: 60px;
    border-radius: 20px;
    border: 0;
    outline: 0;
    cursor: pointer;
    margin-bottom: 100px;
    margin-right: 20px;

}
nav button span{
    display: block;
    background: #999;
    height: 26px;
    width: 26px;
    border-radius: 50%;
    margin-left: 2px;

}
.lamp-set{
    position: absolute;
    top: -20px;
    left: 22%;
    width: 200px;

}
.lamp{
    width: 100%;

}
.light{
    position: absolute;
    top: 97%;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    margin-left: -10px;
    opacity: 1;
}

.text-container{
    max-width: 1000px;
    margin-top: 2%;
    margin-left: 50%;
}
.text-container h1{
    font-size: 80px;
    font-weight: 400;
    display: inline-block;
    color: #fff;

}
.text-container p{
    font-size: 40px;
    font-weight: 200;
    display: inline-block;
    color: #fff;
    margin-top: 10px;

}
.emails{
    
    background: #00a8f3;
    padding: 14px 40px;
    display: inline-block;
    color: #fff;
    font-size: 25px;
    margin-top: 30px;
    margin-left: 50%;
    border-radius: 30px;

}
.active{
    background: turquoise;
}
.active span{
    background:#ffff ;
    margin-left: 31px;

}

<div class="hero">
   <nav>
      <img src="menu.png" class="menu">
      <img src="ovlogo.png" class="logo">
      <ul>
         <li>
            <a href="">
               Home
         </li>
         <li><a href="">contact</li>
         <li><a href="">shop</li>
      </ul>
      <button type="button" onclick="togglebtn()" id="btn"><span></span></button>               
   </nav>
   <div class="lamp-set">
   <img src="lamp.png" class="lamp">
   <img src="light.png" class="light">
   </div>
   <div class="text-container">
   <h1>One Stop Shop.</h1>
   <p>Get the latest "as seen on" products and appliances that fit you and your everyday needs.We specialize in variety and identifying cunsumer sentiment to maximize the expirence with overviral, your online marketplace. </p>
   </div>
   <div class="emails">
   <a href=""style="text-decoration: none; color: #fff;">subscribe for emails</a>
   </div>
</div>

Answer

You have to remove the “.” from the toggle function className.

function togglebtn() {
  btn.classList.toggle("active"); // remove the "." from the class name
}

Advertisement

Answer