如何在点击网站中的按钮时使某些元素可见以代替其他元素

Question

我正在尝试制作一个登录和注册表单，默认情况下只输入用户名和密码，当用户按下登录按钮时，必须输入一组新的输入，如名字、姓氏、出生日期等。。我试图写一个代码来实现同样的目的，但它不起作用。。

#form{
width: 300px;
margin: 40px auto;
display: flex;
flex-direction: column;
justify-content: center;
border: 3px solid rgb(6, 61, 30);
padding: 20px;
border-radius: 30px;
background-color: #e4e1ff;
}
.butts{
display: flex;
justify-content: center;
position: relative;
}
#form .butt{
width: 150px;
height: 50px;
font-size: 25px;
display: inline-block;
background-color: #e4e1ff;
border: none;
}
hr{
height: 4px;
width: 150px;
margin: 0;
background: tomato;
border: none;
transition: 0.2s ease-in-out;
position: absolute;
left: 0px;
bottom: 0px;
}
#butt1:focus ~ hr{
left: 0;
}
#butt2:focus ~ hr{
left: 50%;
}
#login_form{
margin-top: 20px;
}
#login_form input{
width: 300px;
height: 50px;
font-size: 20px;
margin-bottom: 10px;
border-radius: 20px;
}
#signup_form{
display: none;
}
#butt2:focus ~ #signup_form{
display: block;
}
#butt2:focus ~ #login_form{
display: none;
}

<section id="form">
<div class="butts">
<button class="butt" id="butt1">Login</button>
<button class="butt" id="butt2">Sign Up</button>
<hr>
</div>
<div id="login_form">
<input type="text" placeholder="username">
<input type="password" placeholder="password">
</div>
<div id="signup_form">
<input type="text" placeholder="First Name">
<input type="text" placeholder="Last Name">
<input type='date' placeholder="Birthdate">
<input type='text' placeholder="username">
<input type="password" placeholder="password">
<input type="password" placeholder="confirm password">
<button>Connect Github</button>
<button>Create Account</button>
</div>
</section>

Answer 1

function formSwitch(){
var lf=document.getElementById('login_form');
var sf=document.getElementById('signup_form');
if(event.target.id == "butt1"){
lf.style.display='block';
sf.style.display='none';
}else{
lf.style.display='none';
sf.style.display='block'; 
}
}

#form{
width: 300px;
margin: 40px auto;
display: flex;
flex-direction: column;
justify-content: center;
border: 3px solid rgb(6, 61, 30);
padding: 20px;
border-radius: 30px;
background-color: #e4e1ff;
}
.butts{
display: flex;
justify-content: center;
position: relative;
}
#form .butt{
width: 150px;
height: 50px;
font-size: 25px;
display: inline-block;
background-color: #e4e1ff;
border: none;
}

hr{
height: 4px;
width: 150px;
margin: 0;
background: tomato;
border: none;
transition: 0.2s ease-in-out;
position: absolute;
left: 0px;
bottom: 0px;
}
#butt1:focus ~ hr{
left: 0;
}
#butt2:focus ~ hr{
left: 50%;

}
#login_form{
margin-top: 20px;
}
#login_form input{
width: 300px;
height: 50px;
font-size: 20px;
margin-bottom: 10px;
border-radius: 20px;
}
#signup_form{
display: none;
}
#butt2:focus ~ #signup_form{
display: block;
}
#butt2:focus ~ #login_form{
display: none;
}

<section id="form">
<div class="butts">
<button class="butt" id="butt1" onClick="formSwitch()">Login</button>
<button class="butt" id="butt2" onClick="formSwitch()">Sign Up</button>
<hr/>
</div>
<div id="login_form">
<input type="text" placeholder="username">
<input type="password" placeholder="password">
</div>
<div id="signup_form">
<input type="text" placeholder="First Name">
<input type="text" placeholder="Last Name">
<input type='date' placeholder="Birthdate">
<input type='text' placeholder="username">
<input type="password" placeholder="password">
<input type="password" placeholder="confirm password">
<button>Connect Github</button>
<button>Create Account</button>
</div>
</section>