Estou fazendo um form de login básico para o usuário inserir o email e logo depois clicar no botão "continuar" e abrir o input para ser colocado a senha, porém no código que fiz o elemento já inicia aparecendo na página e se eu clico no botão ele se esconde, e não o contrário que é o meu objetivo.
Já tentei deixar a propriedade da div no css com display: block
mas nesse caso o input continua a aparecer normalmente e o botão até para de funcionar
Também tentei alterar as condições do if, mas não consegui alcançar esse resultado
Essa parte do meu formulário está assim:
<html>
<!-- CSS -->
<style>
input{
display: block;
margin: auto;
margin-bottom: 20px;
font-size: 18px;
border-style: none;
border-bottom: 1px solid blue;
margin-bottom: 15px;
}
button{
width: 20%;
display: block;
margin: auto;
}
</style>
<!-- JS -->
<script>
function exibirsenha() {
var exibir = document.getElementById("password");
if (exibir.style.display === "none") {
exibir.style.display = "block";
} else {
exibir.style.display = "none";
}
}
</script>
<!-- HTML -->
<form-group>
<input type="email" name="email" placeholder="Email">
</form-group>
<div id="password">
<form-group>
<input type="password" name="password" id="password" placeholder="Senha">
</form-group>
</div>
<button class="btn" onclick="exibirsenha()">Continuar</button>
</form>
</html>
É uma dúvida de inciante, peguei a parte do JavaScript no w3schools mas não consegui chegar no resultado