1

I wrote a html code for login page and when I clicked on login button it is not showing any login page. I am very much confused

document.querySelector("#show-login").addEventListner("click", function() {
  document.querySelector("popup").classList.add("active")
});

document.querySelector(".popup.close-btn").addEventListner("click", function() {
  document.querySelector("popup").classList.remove("active")
});
<div class="center">

  <button id="show-login">Login</button>

</div>

<div class="popup">

  <div class="close-btn">&times;</div>

  <div class="form">

    <h2>Log in</h2>

    <div class="form-element">

      <label for="email">Email</label>

      <input type="text" id="email" placeholder="Enter email">

    </div>

    <div class="form-element">

      <label for="password">Password</label>

      <input type="password" id="password" placeholder="Enter password">

    </div>

    <div class="form-element">

      <input type="checkbox" id="remember-me">

      <label for="remember-me">Remember me</label>

    </div>

    <div class="form-element">

      <button>Sign in </button>

    </div>

    <div class="form-element">

      <a href="#">Forgot password?</a>

    </div>

  </div>
j08691
  • 204,283
  • 31
  • 260
  • 272
sweety
  • 11
  • 2
  • You have a typo it's `addEventListener` and not `addEventListner` – Konrad Dec 01 '22 at 17:29
  • 1
    @Konrad But `document.querySelector(".popup.close-btn")` also returns `null` – VLAZ Dec 01 '22 at 17:30
  • [What does a space mean in a CSS selector?](https://stackoverflow.com/questions/1126338/what-does-a-space-mean-in-a-css-selector-i-e-what-is-the-difference-between-c) – Konrad Dec 01 '22 at 17:33

1 Answers1

0

you can try this logic :

 document
        .querySelector("#show-login")
        .addEventListener("click", function () {
          document.querySelector(".popup").classList.add("active");
        });

      document
        .querySelector(".popup .close-btn")
        .addEventListener("click", function () {
          document.querySelector(".popup").classList.remove("active");
        });
 .popup {
      display: none;
    }

    .popup.active {
      display: block;
    }
<!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>Document</title>
  </head>
  <body>
    <div class="center">
      <button id="show-login">Login</button>
    </div>

    <div class="popup">
      <div class="close-btn">&times;</div>

      <div class="form">
        <h2>Log in</h2>

        <div class="form-element">
          <label for="email">Email</label>

          <input type="text" id="email" placeholder="Enter email" />
        </div>

        <div class="form-element">
          <label for="password">Password</label>

          <input type="password" id="password" placeholder="Enter password" />
        </div>

        <div class="form-element">
          <input type="checkbox" id="remember-me" />

          <label for="remember_me">Remember me</label>
        </div>

        <div class="form-element">
          <button>Sign in</button>
        </div>

        <div class="form-element">
          <a href="#">Forgot password?</a>
        </div>
      </div>
    </div>
  </body>
</html>
Jerry
  • 1,005
  • 2
  • 13