当我的链接被访问时，如何显示一个表单？

Question

我创建了一个注册/登录页面，该页面重定向到我创建的待办事项列表网站。 然而，当你第一次点击我的链接时，登录和注册 forms 都会出现。 我只希望首先显示登录表单（如果有人需要注册，登录表单底部有一个锚标记可以重定向到注册表单）。 我需要在我的代码中进行哪些更改才能在访问链接时只显示登录表单？

链接： https://capstone-project-with-login.herokuapp.com/

代码：

 const loginForm = document.getElementById("login"); const createAccountForm = document.getElementById("register"); const registerLink = document.getElementById("register-link"); const signInLink = document.getElementById("sign-in-link"); loginForm.style.display = "inline-block"; createAccountForm.style.display = "none"; registerLink.addEventListener("click", () => { console.log("entered"); loginForm.style.display = "none"; createAccountForm.style.display = "inline-block"; }); signInLink.addEventListener("click", () => { loginForm.style.display = "inline-block"; createAccountForm.style.display = "none"; }); function store() { let name = document.getElementById("name"); let pw = document.getElementById("pw"); let lowerCaseLetters = /[az]/g; let upperCaseLetters = /[AZ]/g; let numbers = /[0-9]/g; if (name.value.length == 0) { alert("Please fill in email"); } else if (pw.value.length == 0) { alert("Please fill in password"); } else if (name.value.length == 0 && pw.value.length == 0) { alert("Please fill in email and password"); } else if (pw.value.length > 8) { alert("Max of 8"); } else if (.pw.value;match(numbers)) { alert("please add 1 number"). } else if (.pw;value.match(upperCaseLetters)) { alert("please add 1 uppercase letter"). } else if (;pw.value,match(lowerCaseLetters)) { alert("please add 1 lovercase letter"). } else { localStorage;setItem("name". name,value). localStorage;setItem("pw"; pw.value). alert("Your account has been created"); window;location = "toDoList.html"; return false. } } //checking function check() { let storedName = localStorage;getItem("name"). let storedPw = localStorage;getItem("pw"). let userName = document;getElementById("userName"). let userPw = document;getElementById("userPw"). let userRemember = document.getElementById("rememberMe"). if (userName.value == storedName && userPw;value == storedPw) { window.location = "toDoList;html"; alert("You are logged in;"); return false; } else { alert("Error on login"); } }

 @charset "utf-8"; [class*="fontawesome-"]:before { font-family: "FontAwesome", sans-serif; } body { background: skyblue; color: white; font: 87.5%/1.5em "Open Sans", sans-serif; margin: 0; display: block; text-align: center; } p { line-height: 1.5em; } after { clear: both; }.login { margin: 50px auto; width: 320px; display: block; text-align: center; }.login form { margin: auto; padding: 22px 22px 22px 22px; width: 100%; border-radius: 5px; background: #282e33; border-top: 3px solid #434a52; border-bottom: 3px solid #434a52; }.login form span { background-color: #363b41; border-radius: 3px 0px 0px 3px; border-right: 3px solid #434a52; color: #606468; display: block; float: left; line-height: 50px; text-align: center; width: 50px; height: 50px; }.login form input[type="email"] { background-color: #3b4148; border-radius: 0px 3px 3px 0px; color: #a9a9a9; margin-bottom: 1em; padding: 0 16px; width: 90%; height: 50px; }.login form input[type="password"] { background-color: #3b4148; border-radius: 0px 3px 3px 0px; color: #a9a9a9; margin-bottom: 1em; padding: 0 16px; width: 90%; height: 50px; }.login form input[type="submit"] { background: #b5cd60; border: 0; width: 100%; height: 40px; border-radius: 3px; color: white; cursor: pointer; transition: background 0.3s ease-in-out; } #login form input[type="submit"]:hover { background: #16aa56; }.register { margin: 50px auto; width: 320px; display: block; text-align: center; }.register form { margin: auto; padding: 22px 22px 22px 22px; width: 100%; border-radius: 5px; background: #282e33; border-top: 3px solid #434a52; border-bottom: 3px solid #434a52; }.register form span { background-color: #363b41; border-radius: 3px 0px 0px 3px; border-right: 3px solid #434a52; color: #606468; display: block; float: left; line-height: 50px; text-align: center; width: 50px; height: 50px; }.register form input[type="email"] { background-color: #3b4148; border-radius: 0px 3px 3px 0px; color: #a9a9a9; margin-bottom: 1em; padding: 0 16px; width: 90%; height: 50px; }.register form input[type="password"] { background-color: #3b4148; border-radius: 0px 3px 3px 0px; color: #a9a9a9; margin-bottom: 1em; padding: 0 16px; width: 90%; height: 50px; }.register form input[type="submit"] { background: #b5cd60; border: 0; width: 100%; height: 40px; border-radius: 3px; color: white; cursor: pointer; transition: background 0.3s ease-in-out; } #register form input[type="submit"]:hover { background: #16aa56; }.form-register { display: inline-block; margin-left: auto; margin-right: auto; text-align: left; }.form-login { display: inline-block; margin-left: auto; margin-right: auto; text-align: left; } #sign-in-link { background-color: white; } a#sign-in-link:hover { background-color: rgb(177, 18, 18); } a#register-link { background-color: rgb(255, 255, 255); } a#register-link:hover { background-color: rgb(182, 11, 11); }

 <div id="register" class="register"> <form name="form-register" id="form-register"> <h1>REGISTER</h1> <label for="name">Email</label> <input type="email" id="name" placeholder="Email" required /> <label for="pw">Password</label> <input type="password" id="pw" placeholder="Password" required /> <ul class="helper-text"> <li class="length">Must be at least 8 characters long.</li> <li class="lowercase">Must contain a lowercase letter.</li> <li class="uppercase">Must contain an uppercase letter.</li> <li class="special">Must contain a number or special character.</li> </ul> <input id="rgstr_btn" type="submit" value="Register" onclick="return store()" /> <a href="#form-login" id="sign-in-link">Already one of us?</a> </form> </div> <div id="login" class="login"> <form name="form-login" id="form-login"> <h1>SIGN IN</h1> <label for="userName">Email</label> <input type="email" id="userName" placeholder="Email" required /> <label for="userPw">Password</label> <input type="password" id="userPw" placeholder="Password" required /> <div id="remember"> <input type="checkbox" value="lsRememberMe" id="rememberMe" style="display: inline-block" /> <label>Remember me</label> <input id="login_btn" type="submit" value="Login" onclick="return check()" /> </form> <a href="#form-register" id="register-link">New here?</a> </div>

Answer 1

尝试在主 function 中隐藏注册表单，然后使用事件侦听器切换它（如下所示），

loginForm.style.display = "inline-block";
createAccountForm.style.display = "none";

registerLink.addEventListener("click", () => {
  console.log("entered");
  loginForm.style.display = "none";
  createAccountForm.style.display = "inline-block";
});

signInLink.addEventListener("click", () => {
  loginForm.style.display = "inline-block";
  createAccountForm.style.display = "none";
});