I can’t make the log button

Question

I’m not getting the record button the way I want it. I have my normal login button but when I click on the register it gives the same login fields. It also has a bit of Javascript.

<!---- Botão do iniciar sessão--->
<button class="login"  onclick="document.getElementById('id01').style.display='block'"  style="border:2px solid black; width:auto; border-radius:10%;" ><i class="fa fa-user">Iniciar Sessão</i></button>


    <div id="id01" class="modal">

                <form class="modal-content animate" action="indexlogin.php"   method="post" >


        <div class="container">
                        <label><b>Email</b></label>
                            <input  id="field"type="text" name="email"style="border:1px solid black; width:auto;" placeholder="Email" required>

                        <label><b>Palavra-Passe</b></label>
                            <input  id="field" type="password" name="password"style="border:1px solid black; width:auto;" placeholder="Palavra-Passe"required>

                        <button  id="field" type="submit"  name="login" style="border:1px solid black; width:200px;" >Entrar</button>
        </div>



                <div class="container" style="background-color: #adad85">
                        <button type="button" onclick="document.getElementById('id01').style.display='none'" action="indexlogin.php" style=" border:1px solid black; width:auto; border-radius:10%;" class="cancelarbotao">Cancelar</button>
                </div>

                </form>
    </div>  
    <!---Fim do botão do iniciar sessão --->

    <!--- Botão de registar---->
                <button class="registar"  onclick="document.getElementById('id01').style.display='block'" style="border:2px solid black;  border-radius:10%;" > <i class="fa fa-user-plus">Registar</i></button>

    <div id="id2" class="modal">

                <form class="modal-content animate" action="indexlogin.php"   method="post" >


        <div class="container">


                            <input  id="field"  type="name"     name="nome"style="border:1px solid black; width:auto;" placeholder="Nome Completo" required>

                            <input  id="field"type="text"       name="email_registar"style="border:1px solid black; width:auto;" placeholder="Email" required>

                            <input  id="field" type="password"  name="password_registar"style="border:1px solid black; width:auto;" placeholder="Palavra-Passe"required>

                            <input  id="field" type="password"  name="password_rep"style="border:1px solid black; width:auto;" placeholder="Palavra-Passe"required>

                            <input  id="field" type="submit"    name="registar" style="border:1px solid black; width:200px;" >Criar Conta</button>
        </div>



                <div class="container" style="background-color: #adad85">
                        <button type="button" onclick="document.getElementById('id01').style.display='none'" style=" border:1px solid black; width:auto; border-radius:10%;" class="cancelarbotao">Cancelar</button>
                </div>

                </form>
    </div>  
    <!---fim do botão do login--->



<script>
var modal = document.getElementById('id01');

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

Answer 1

changes this line:

<button class="registar"  onclick="document.getElementById('id2').style.display='block'" style="border:2px solid black;  border-radius:10%;" > <i class="fa fa-user-plus">Registar</i></button>

before Document.getElementById(') was id01, puts id2 which is your div