'How to properly write a javaScript toggle hide/show function for 2 forms (Registration and Login form) without refreshing a page or link to new html

I went through all similar questions but none of them seem to help me with what I want to do. Maybe I am just missing something and if there is a question out there that could help could you please point me to that question and I will delete this. Anywhoo... I am trying to create a function that when I click a link on the bottom of the login form (Need an account? Register) it will hide the Login form and show the Registration form with a link on the bottom of the Registration form (Have an account? Login) to go back to the Login form without refreshing the page or going to a new html page. I have tried multiple things... I want it to look like this... I have set the display to none for my registration form and the display for my login form to block. example of login to registration and back

This is two of the codes I have tried.

Example one that seems right but is wrong:




function showAndHide() {
   const loginBtn = document.getElementById('loginbtn');
   const signupBtn = document.getElementById('signupbtn');
   const regForm = document.getElementById('register');
   const logForm = document.getElementById('login');
   if (regForm.style.display == 'none') {
       regForm.style.display = 'block';
       logForm.style.display = 'none';
   } else {
       logForm.style.display = 'block';
       regForm.style.display = 'none';
}
loginBtn.addEventListener('onclick', function() {
showAndHide(loginBtn);
});
signupBtn.addEventListener('onclick', function() {
showAndHide(signupBtn);
});

Example two that seems right but is wrong:




function showAndHide() {
  const regForm = document.getElementById('register');
  const logForm = document.getElementById('login');
  if (regForm.style.display = 'none') {
      regForm.style.display = 'block';
      logForm.style.display = 'none';
  } else { 
      logForm.style.display = 'none';
      regForm.style.display = 'block';
  }
}

My Html:




 <body>
<section id="login">
    <h2>Login</h2>
    <form id="login-form" method="post" novalidate>
        <div>
            <label for="logfield">Email:</label>
            <input type="email" name="logfield" id="logfield" required>
        </div>
        <div>
            <label for="pw">Password:</label>
            <input type="password" name="pw" id="pw" size="15" required>
        </div>
        <div>
           <button type="submit">LOGIN</button>
        </div>
        <div>
            <a href="" id="signupbtn">Need an account? Register</a>
        </div>
    </form>
</section>
<section id="register">
    <h2>Register</h2>
    <form id="register-form" method="post" no validate>
        <div>
            <label for="email-field2">Email:</label>
            <input type="email" name="email-field2" id="email-field2" required>
        </div>
        <div>
            <label for="pw2">Password:</label>
            <input type="password" name="pw2" id="pw2" size="15" required>
        </div>
        <div>
            <label for="pw3">Repeat Password:</label>
            <input type="password" name="pw3" id="pw3" size="15" required>
        </div>
        <div>
            <button type="submit">REGISTER</button>
        </div>
        <div>
            <a href="" id="loginbtn">Have an account? Log in</a>
        </div>
    </form>
</section>
</body>
javascripthtmlformstoggleevent-listener


Sources

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

Source: Stack Overflow

Solution Source

Related Questions