如何正确地为两个表单（注册和登录表单）编写javaScript切换隐藏/显示函数，而无需刷新页面或链接到新的html

安全青年 lv.1

发布时间：2022-04-11 18:34:00 397

相关标签： # css# html

我问了所有类似的问题，但似乎没有一个能帮助我做我想做的事情。也许我只是错过了一些东西，如果有一个问题可以帮助你，请你指出我的问题，我会删除这个。不管怎样。。。我试图创建一个函数，当我点击登录表单底部的链接（需要帐户？注册）时，它将隐藏登录表单，并显示注册表单底部的链接（拥有帐户？登录），以返回登录表单，而不刷新页面或进入新的html页面。我试过很多东西。。。我希望它看起来像这样。。。我已将注册表的显示设置为“无”，并将登录表单的显示设置为“阻止”。登录到注册并返回的示例

这是我尝试过的两种代码。

一个看似正确但却是错误的例子：




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);
});

第二个例子似乎是对的，但却是错的：




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';
  }
}

我的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>

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。