How to simulate Login using Javascript

Asked

Viewed 738 times

1

Hello, I would like to simulate a login, basically when a certain email and password chosen by me are inserted the script will login with display:none; and another div I still have to create with display:inline;

Here’s the code I already have and I don’t understand why the script doesn’t work...

<script>
function login(){
   var m = document.getElementById('caixa_email_login').value;
   var p = document.getElementById('caixa_password_login').value;
   if (m=="email" && p=="123"){
      login.style.display = "none";
   }
   else{
      window.alert("O utilizador ou a password encontram-se incorretos.");
   }
}
</script>

ul.menu{
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #223A5E; /* cor bck menu*/
    position: fixed;
    width: 100%;
    height: 2.5vw;
    z-index: 101;
}

.menu li {
    float: left;
}

 li a, .sub {
    display: inline-block
    text-decoration: none;
}

.menu li a:hover, .submenu:hover .sub {
    color:#f1e3dd;
}

.menu li.submenu {
    display: inline-block;
}

.sub-content {
    display: none;
    position: absolute;
    background-color: #223A5E; /* cor bck submenu */
    min-width: 8vw;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.menu a {
    position: relative;
    display: block;
    padding: 0.8vw 0.5vw;
    margin: 0 0.5vw;
    letter-spacing: 2px;
    font-size: 1vw;
    line-height: 0.8vw;
    font-weight: 900;
    color: #87bdd8;    /* cor letras menu */
    text-decoration: none;
    text-align: left;
}


.submenu:hover .sub-content {
    display: block;
}

.login{
    display:inline;
}

.login li{
    float: right;
}

img{
    float: left;
    width: 3vw;
    height:auto;
}

input[type=text], input[type=password]{
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Butões */

button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    font-size: 1vw;
}

/* Botão cancel */
.cancelbtn {
    padding: 14px 20px;
    background-color: #f44336;
}

/* Botões na mesma linha cada um com o mesmo tamanho */
.cancelbtn,.signupbtn {
    float: left;
    width: 50%;
}

/* Afasta o formulario das margens */
.container {
    padding: 16px;
}


.clearfix::after {
    content: "";
    clear: both;
    display: table;
}


/* Background do popup */
.rpopup , .lpopup{
    display: none; 
    position: fixed; 
    z-index: 100; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4); 
    padding-top: 60px;
}

/* Conteudo do popup*/

.conteudo-popup {
    background-color: #fefefe;
    margin: 5% auto 15% auto; 
    border: 1px solid #888;
    width: 40%; 
    border-radius: 20px;
}

 <ul class="menu">
        <img src="imgs\brain.png">   
        <li class="submenu"><a href="#tituloinfo" class="sub">Conferência</a>
            <div class="sub-content">
                <a href="#infoprimeiro">Informações Gerais</a>
                <a href="#infosegundo">Sessões Anterirores</a>
            </div>
        </li>
        <li><a href="#titulosubmete">Artigos</a></li>
        <li ><a href="#tituloprograma" class="sub">Programas</a></li>
        <li><a href="#titulogaleria">Galeria</a></li>



  <div class="login">
        <li onclick="document.getElementById('loginpop').style.display='block' ; document.getElementById('registopop').style.display='none'"><a href="#login">Login</a></li>
        <li onclick="document.getElementById('registopop').style.display='block'; document.getElementById('loginpop').style.display='none'"><a href="#registo">Registo</a></li>
    </div>
    </ul> 

    <!-- Login -->

      <div id="loginpop" class="lpopup">
            <form class="conteudo-popup" action="">
               <div class="container">
                   <label><b>Email</b></label>
                        <input id="caixa_email_login" type="text" placeholder="Introduza Email" name="email" required>

                   <label><b>Palavra-Passe</b></label>
                        <input id="caixa_password_login" type="password" placeholder="Introduza Palavra-Passe" name="psw" required>

                        <input type="checkbox" checked="checked"> Guardar dados de utilizador!

                    <div class="clearfix">
                         <button type="button" onclick="document.getElementById('loginpop').style.display='none'" class="cancelbtn">Cancelar</button>
                        <button type="submit" class="signupbtn" onClick="login()">Iniciar Sessão</button>
                    </div>
                </div>
            </form>
      </div>
javascript html css

  • But who is this login of that line login.style.display = "none";

  • is the <div class="login"> I want her to have None display when logging in

  • @Leocaracciolo I can use class.style.display= "None"; ? or I have to use getElementById?!

  • Can use document.getElementsByClassName("login")[0].style.display = "none"; for the first element with class = "login". If it was for the second element with class = "login". then it would be document.getElementsByClassName("login")[1].style.display = "none"; and so on

  • Tip: Use the PROMPT command with DO{} WHILE();

2 answers

1

You can try to catch using the document.getElementById("login"), e alterando a estilização através dostyle`.

if (condição for true) {
  document.getElementById("login").style = 'none';
}

  • Yes, I already solved the problem using Document.getElementById("login"), thanks for the answer

1

Can use document.getElementsByClassName("login")[0].style.display = "none"; for the first element with class = "login".

function login(){
    var m = document.getElementById('caixa_email_login').value;
        var p = document.getElementById('caixa_password_login').value;

            if (m=="email" && p=="123"){

                //login.style.display = "none";
                document.getElementsByClassName("login")[0].style.display = "none";
            }
          else{
               window.alert("O utilizador ou a password encontram-se incorretos.");

          }

}

HTML

<ul class="menu">
    <img border="0" src="https://nccih.nih.gov/sites/nccam.nih.gov/files/brain.png">  
    <li class="submenu"><a href="#tituloinfo" class="sub">Conferência</a>
        <div class="sub-content">
            <a href="#infoprimeiro">Informações Gerais</a>
            <a href="#infosegundo">Sessões Anterirores</a>
        </div>
    </li>
    <li><a href="#titulosubmete">Artigos</a></li>
    <li ><a href="#tituloprograma" class="sub">Programas</a></li>
    <li><a href="#titulogaleria">Galeria</a></li>

 <!-- ´PRIMEIRO ELEMENTO com class = "login"-->
 <div class="login">
    <li onclick="document.getElementById('loginpop').style.display='block' ; document.getElementById('registopop').style.display='none'"><a href="#login">Login</a></li>
    <li onclick="document.getElementById('registopop').style.display='block'; document.getElementById('loginpop').style.display='none'"><a href="#registo">Registo</a></li>
</div>
</ul>

If it were for the second element with class = "login". then it would be document.getElementsByClassName("login")[1].style.display = "none";

HTML

<ul class="menu">
    <img border="0" src="https://nccih.nih.gov/sites/nccam.nih.gov/files/brain.png">  
    <li class="submenu"><a href="#tituloinfo" class="sub">Conferência</a>
        <div class="sub-content">
            <a href="#infoprimeiro">Informações Gerais</a>
            <a href="#infosegundo">Sessões Anterirores</a>
        </div>
    </li>
    <li><a href="#titulosubmete">Artigos</a></li>
    <li ><a href="#tituloprograma" class="sub">Programas</a></li>
    <li><a href="#titulogaleria">Galeria</a></li>

 <!-- ´PRIMEIRO ELEMENTO com class = "login"-->
 <div class="login">
    <li onclick="document.getElementById('loginpop').style.display='block' ; document.getElementById('registopop').style.display='none'"><a href="#login">Login</a></li>
    <li onclick="document.getElementById('registopop').style.display='block'; document.getElementById('loginpop').style.display='none'"><a href="#registo">Registo</a></li>
</div>

 <!-- ´SEGUNDO ELEMENTO com class = "login"-->
 <div class="login">
    <li onclick="document.getElementById('loginpop').style.display='block' ; document.getElementById('registopop').style.display='none'"><a href="#login">Login</a></li>
    <li onclick="document.getElementById('registopop').style.display='block'; document.getElementById('loginpop').style.display='none'"><a href="#registo">Registo</a></li>
</div>
</ul>

And so on and so forth

Browser other questions tagged javascript html css

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