Form doesn't disappear after clicking

Question

I am trying to create a login form which appear and disappear when users click the login button. The code below ensure that the form does not show at start and only display form when user clicks it. However, the form is not disappearing despite clicking the button for the second time. I also included the jquery string below. Am I missing something or is it because the jquery code is outdated?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

$(document).ready(function() {
  const arrow = $(".arrow-up");
  const form = $(".login-form");
  const status = false;

  $("#login").click(function(event) {
    event.preventDefault();
    if (status == false) {
      arrow.fadeIn();
      form.fadeIn();
      status == true;
    } else {
      arrow.fadeOut();
      form.fadeOut();
      status = false;
    }
  })
})

.arrow-up {
  width: 0;
  height: 0;
  position: absolute;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #e86b00;
  right: 750px;
  bottom: 10px;
  display: none;
}

.login-form {
  position: absolute;
  width: 300px;
  height: auto;
  background: #e86b00;
  top: 20px;
  right: -150px;
  border-radius: 3px;
  border-bottom: 5px solid gray;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li><a href="#" id="login">LogIn</a></li>
<div class="arrow-up">
  <div class="login-form">
    <form>
      <div>
        <label style="color:black">Username:</label>
        <input type="text" placeholder="Username" id="usernm" autocomplete="new-password" required/>
      </div>
      <div>
        <label style="color:black">Password:</label>
        <input type="password" placeholder="Password" id="passw" autocomplete="new-password" required/>
      </div>
      <div>
        <input type="submit" />
      </div>
      <div>
        <a href="#">Lost Your Password</a>
      </div>
    </form>
  </div>
</div>

`status == true;` – that’s a comparison, not an assignment. And `const status` means this is a constant to begin with, so you can not change the value of that variable later. (Which btw. the browser console would have told you about.) — CBroe, Jan 11 '21 at 09:18
I was following based on a tutorial so instead of const, what should I put? — Titania Lo, Jan 11 '21 at 09:22
Either `var` or `let`. I'd suggest finding a more accurate tutorial if it has that kind of error in it, though. — Rory McCrossan, Jan 11 '21 at 09:26
Interesting the const error does not appear until changed to `status = true` — mplungjan, Jan 11 '21 at 09:28
Now is working after changing to let for status and the extra equal! thanks for the advice! — Titania Lo, Jan 11 '21 at 09:35

score 4 · Accepted Answer · answered Jan 11 '21 at 09:17

4

status == true; should be status=true

answered Jan 11 '21 at 09:17

Abdulhafeez Abdulraheem

155
1
4

Form doesn't disappear after clicking

1 Answers1