Parking system

Asked

Viewed 305 times

0

I decided to create a project in pure Javascript without database, very simple even to study.

This system registers cars in a parking lot, even then beauty, but I want the home page " Company owner " enter the login and password, simulating a login same.

Only that the person enters the login and does not go to another page, what I’m doing wrong?

The javascript code is this one:

var login = "[email protected]";
var senha = "1234";
var botao = document.querySelector("botaoEnviar");
botao.addEventListener("click", function(event){
    event.preventDefault();

    if(login == "" || login.indexOf('@')==-1 || login.indexOf('.')==-1){
        console.log("E-mail errado");
        alert("E-mail errado");
    }
    if(senha == ""){
        console.log("Senha errada");
        alert("Senha errada");
    }else{
        return false;
    }

});

And the HTML code is here:

<html>
<head>
    <title>Estacionamento</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/login.css">
</head>
<body>
<form id="formLogin" action="index.html" method="post">
    <div class="container">
        <div class="row vertical-offset-100">
            <div class="col-md-4 col-md-offset-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Entre com o seu login</h3>
                    </div>
                    <div class="panel-body">
                        <form accept-charset="UTF-8" role="form">
                        <fieldset>
                            <div class="form-group">
                                <input class="form-control" id="inputEmail" placeholder="E-mail" name="email" type="text">
                            </div>
                            <div class="form-group">
                                <input class="form-control" id="inputPass" placeholder="Password" name="password" type="password">
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="remember" type="checkbox" value="Remember Me"> Remember Me
                                </label>
                            </div>
                            <input class="btn btn-lg btn-success btn-block" id="botaoEnviar" type="submit" value="Login">
                        </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script src="js/validarLogin.js"></script>
</body>
</html>

The browser console error:

validarLogin.js:4 Uncaught Typeerror: Cannot read Property 'addeventlistener' of null validateLogin.js:4

javascript

1 answer

1


Try to change this line:

var botao = document.querySelector("botaoEnviar");

To:

var botao = document.querySelector("#botaoEnviar");

If you want to select by id, you must specify the prefix #. If you want to select by class, you would have to specify with the prefix "." (no quotes). It’s just like with css.

In this case the error would be because since it did not specify with the prefix it would not find anything and then the button variable would be equal to NULL.

But do not forget that the ID must be unique, and then it would be easier in this situation to use the function Document.getElementById(ID), and with this function would not have to specify the prefix #, for example:

var botao = document.getElementById("botaoEnviar");

The reason nothing happens even by fixing the above error is because you are not sending anything:

var login = "[email protected]"; // <<<< Variavel pre-definida
var senha = "1234"; // <<<<< Variavel pre-definida
var botao = document.querySelector("botaoEnviar");
botao.addEventListener("click", function(event){
    event.preventDefault(); //<< Cancela o evento independemente se tiver certo ou errado

    if(login == "" || login.indexOf('@')==-1 || login.indexOf('.')==-1){
        console.log("E-mail errado");
        alert("E-mail errado");
    }
    if(senha == ""){
        console.log("Senha errada");
        alert("Senha errada");
    }else{
        return false;
    }

});

As you pre-set the variables they will always be correct so it will not show any message, and as you cancel the event right at the beginning it never advances, if you take the values of the inputs, and only cancel the event when an error occurs will already work:

var botao = document.querySelector("#botaoEnviar");
botao.addEventListener("click", function(event){
    var login = document.getElementById("inputEmail").value;
        var senha = document.getElementById("inputPass").value;

    if(login == "" || login.indexOf('@')==-1 || login.indexOf('.')==-1){
        console.log("E-mail errado");
        alert("E-mail errado");
      event.preventDefault();
    }
    if(senha == ""){
        console.log("Senha errada");
        alert("Senha errada");
      event.preventDefault();
    }

});

  • It did not work, tried both ways and continues the same thing, if I use getElementById the error in the console some, but does not send.

  • Check now the reply @Guilhermeramos

  • 1

    It worked, thank you very much!!!

Browser other questions tagged javascript

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