How do I switch from visible to invisible between two forms

Asked

Viewed 56 times

0

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Login</title>
    <link rel="stylesheet" type="text/css" href="estilo.css"/>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <section id="box">

      <form id="form1">
        <h1>Login</h1>
        <input type="text" placeholder="Username"/>
        <input type="password" placeholder="Password"/>
        <div>
            <button id="btns">Signup</button>
            <input type="submit" value="Login"/>
        </div>
      </form>

      <form id="form2">
        <h1>Signup</h1>
        <input type="text" placeholder="Name"/>
        <input type="email" placeholder="Email"/>
        <input type="text" placeholder="Username"/>
        <input type="password" placeholder="Password"/>
        <input type="password" placeholder="Confirm Password"/>
        <div>
            <button id="btnl">Back</button>
            <input type="submit" value="Signup"/>
        </div>
      </form>

    </section>
  </body>
</html>

CSS:

@import url('https://fonts.google...amily=Roboto');

html, body{
    font-family: 'Roboto', sans-serif;
    width:100%;
    background-image:-webkit-linear-gradient(#5b82c1,#74a6f7);
    margin:0;
    padding:0;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
}

#box{
    display:flex;
    align-items: center;
    flex-flow: column wrap;
    width: 30%;
    background-color:#fff;
    padding:18px;
}

h1{
    color:#5b82c1;
    font-size:2em;
    ;
}

form{
    width:90%;
}

form input{
    border:none;
}

form input[type="text"],
form input[type="email"],
form input[type="password"]{
    width:100%;
    height:35px;
    font-size:20px;
    margin-bottom:8%;
}

form input[type="submit"]{
    background-color:#5b82c1;
    width:95px;
    height:45px;
    font-size:1.5em;
    color:#fff;
    margin-left:46%;
}

button{
    border:none;
    background-color:#5b82c1;
    width:95px;
    height:45px;
    font-size:1.5em;
    color:#fff;
}

.hiddenclass{
    display:none;
}

.showclass{
    display:block;
}

the javascript code I tried:

var form1, form2, btns, btnl;

window.onload = function () {
    form1 = document.getElementById("form1");
    form2 = document.getElementById("form2");
    btns = document.getElementById("btns");
    btnl = document.getElementById("btnl");

form2.className = "hiddenclass";

btns.addEventListener("click", function(){
    form1.className = "hiddenclass";
    form2.className = "shownclass";
});

btnl.addEventListener("click", function(){
    form1.className = "shownclass";
    form2.className = "hiddenclass";
});
};
javascript
  • 2

    But what’s not working in that way of yours?

  • when the page loads the form2 this as display:None, but when I click on the Signup button the Form1 should be invisible and the form2 be visible but quickly shows the form2 and returns the Form1 as if one had made a difference

  • Look there, I posted an answer. It seems to be doing what you want, maybe another element of your page should be interfering...

No answers

Browser other questions tagged javascript

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