Parking system

Question

Parking system

Navigation

#1 by (1 votes)

0

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

This system registers cars in a parking lot, so beauty, but I want the "Owner of the company" to enter the login and password, simulating a login.

Only the person types the login and does not go to another page, what am I doing wrong?

The javascript code is the one here:

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 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><scriptsrc="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 error in the browser console:

validateLogin.js: 4 Uncaught TypeError: Can not read property 'addEventListener' of null at validarLogin.js: 4

javascript

asked by anonymous 19.01.2018 / 15:30

1 answer

how to handle a json that contains multiple results using python Jquery effect does not work because of relatives

score 1 · Accepted Answer

Try changing 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 "." (without quotes). It's just like with css.

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

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

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

The reason that nothing happens even if you get the above error, it's because you are not issuing 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 have pre-defined the variables they will always be correct so you will not show any messages, and as you cancel the event 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();
    }

});