'Eventlistenerbutton unresponsive

I have created a login form button on my website. It is opening but the closing button is not working.

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" />
    <title>Welcome to Hotel</title>

    <!-- font cdn useful -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
    />

    <!-- css file link -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- hearder section -->
    <header>
      <a href="#"class="logo"><span>H<span>otel<a>
      <nav class="navbar">
          <a href="#home">home</a>
          <a href="#books">books</a>
          <a href="#packages">packages</a>
          <a href="#services">services</a>
          <a href="#gallery">gallery</a>
          <a href="#reviews">reviews</a>
          <a href="#contact">contact</a>
      </nav>
      

      <div class="icons">
          <i class="fas fa-search" id="search-btn"></i>

          <i class="fas fa-user" id="login-btn"></i>
      </div>

       <form action="" class="search-bar-container">
           <input type="search" id="search-bar" placeholder="search here...">

           <label for="search-bar" class="fas fa-search" ></label>
       </form>
    </header>
    <!-- header endeing -->
    <!-- login form container -->
    <div class="login-form-container">
      <i class="fas fa-times" id="form-close"></i>
      <form action="">
        <h3>login</h3>
        <input type="email" class="box" placeholder="enter your email">
        <input type="password" class="box" placeholder="enter your password">
        <input type="submit" value="login" class="btn">
        <input type="checkbox" id="remember">
        <label for="remember">Remember me</label>
        <p>Forgot password? <a href="#">click here</a></p>
        <p>dont have a account? <a href="#">register here</a></p>
      </form>
    </div>



    <!-- js file link -->
    <script src="main.js"></script>
  </body>
</html>
    

css:

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700&family=Ubuntu&display=swap');

:root{
    --orange:#ffa500;
}
*{
    font-family: 'Nunito', 'sans-serif';
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-transform: capitalize;
    outline: none;
    border: none;
    text-decoration: none;
    transition: all 0.2s linear;
}

*::selection{
    background:var(--orange);
    color: #fff;
}

html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-padding-top: 6rem;
    scroll-behavior: smooth;

}

.btn{
    display: inline-block;
    margin-top: 1rem;
    background:var(--orange);
    color: #fff;
    padding: .8rem 3rem;
    border: .2rem solid var(--orange);
    cursor: pointer;
    font-size: 1.7rem;

}

.btn:hover{
  background: rgba(255,165,0,.2);
  color: var(--orange);

}

header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #333;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 9%;

}

header  .logo{
    font-size: 2.5rem;
    font-weight: bolder;
    color: #fff;
    text-transform: uppercase;
}

header .logo span{
    color: var(--orange);
    
}

header .navbar a{
    color: #fff;
    font-size: 2rem;
    margin: .8rem;


}

header .navbar a:hover{
   color: var(--orange);
}

header .icons i{
    font-size: 2.5rem;
    color: #fff;
    cursor: pointer;
    margin-right: 2rem;

}

header .icons i:hover{
    color: var(--orange);

}

header .search-bar-container{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding:1.5rem 2rem;
    background: #333;
    border-top: .1rem solid rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    z-index: 1001;
     clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); 

}

header .search-bar-container.active{

    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 

}

header .search-bar-container #search-bar{
    width: 100%;
    padding: 1rem;
    text-transform: none;
    color: #333;
    font-size: 1.7rem;
    border-radius: 1rem;


}

header .search-bar-container label{
    color: #fff;
    cursor: pointer;
    font-size: 3rem;
    margin-left: 1.5rem;

}

header .search-bar-container label:hover{
    color: var(--orange);

}

.login-form-container{
    position: fixed;
    top: -120%;
    left: 0;
    z-index: 10000;
    min-height: 100vh;
    width: 100%;
    background: rgba(0,0,0,.7);
    display: flex;
    align-items: center;
    justify-content: center;


}

.login-form-container.active{
    top: 0;
}

.login-form-container form{

    margin: 2rem;
    padding: 1.5rem 2rem;
    border-radius: .5rem;
    background: #fff;
    width: 50rem;

}

.login-form-container form h3{
    font-size: 3rem;
    color: #444;
    text-transform: uppercase;
    text-align: center;
    padding: 1rem 0;

}

.login-form-container form .box{
    width: 100%;
    padding: 1rem;
    font-size: 1.7rem;
    color: #333;
    margin: .6rem 0;
    border: .1rem solid rgba(0,0,0,0.3);
    text-transform: none;
}

.login-form-container form .box:focus{
    border-color: var(--orange);

}

.login-form-container form #remember{
    margin: 2rem 0;
}

.login-form-container form label{
    font-size: 1.5rem;
}

.login-form-container form .btn{
    display: block;
    width: 100%;

}

.login-form-container form p{
    padding: .5rem 0;
    font-size: 1.5rem;
    color: #666;
}

.login-form-container form p a{
    color: var(--orange);
}

.login-form-container form p a:hover{
    color:#333;
    text-decoration: underline;
}

.login-form-container #form-close{
    position: absolute;
    top: 2rem;
    right: 3rem;
    font-size: 5rem;
    color: #fff;
    cursor: pointer;
}

JS(the problem)

let searchbtn = document.querySelector('#search-btn'); let searchbar = document.querySelector('.search-bar-container');

let formbtn = document.querySelector('#login-btn');
let loginForm = document.querySelector('.login-form-container');
let formclose = document.querySelector('.form-close');

window.onscroll = () =>{
    searchbtn.classList.remove('fa-times');
    searchbar.classList.remove('active');
}

searchbtn.addEventListener('click', () =>{
    searchbtn.classList.toggle('fa-times');
    searchbar.classList.toggle('active');
});

formbtn.addEventListener('click', () =>{
    loginForm.classList.add('active');
});

formclose.addEventListener('click', () =>{
    loginForm.classList.remove('active');
});


console reply:
[enter image description here][1]


  [1]: https://i.stack.imgur.com/vfdtp.png

Solution 1:^[1]

You made a small typo in the javascript file.

let formclose = document.querySelector(".form-close");

Should be

let formclose = document.querySelector("#form-close");

Since the element has an id of form-close and not a class, you need to use the '#' instead of the '.'

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	Simon Leroux

'Eventlistenerbutton unresponsive

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]