"Continue" button to display div to enter password in the form

Asked

Viewed 28 times

0

I’m making a basic login form for the user to enter the email and soon after click the "continue" button and open the input to be put the password, but in the code I did the element already starts appearing on the page and if I click the button it hides, and not the other way around that is my goal.

I’ve tried to leave the div property in css with display: block but in that case the input continues to appear normally and the button even stops working

I also tried to change the conditions of if, but I could not achieve this result

That part of my application is like this:

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

It is a question of inciante, I took the part of Javascript in w3schools but I could not get the result

javascript html css

1 answer

1


Just you already start the div with display:none in the style, note that in the div#password I put a style="display: none"

<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" style="display:none">
    <form-group>
      <input  type="password" name="password" id="password" placeholder="Senha">
    </form-group>
    </div>
    <button class="btn" onclick="exibirsenha()">Continuar</button>

  </form>
</html>

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.