authEmailPassButton is null

Asked

Viewed 16 times

-1

i am developing a firebase authentication, but when clicking to log in nothing happens, when I look through the browser console displays the following error: 'Typeerror: authEmailPassButton is null', I don’t know why of is null!

My HTML code:

<html>
<head>
    <title>Firebase</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8">

    <link rel="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/fontawesome.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/style.css">
</head>

<body>

    <h1>Autenticação</h1>

    <div clas="col-md-4">
        <h3 clas="text-center" id="displayName">Você não está Autenticado</h3>
        <br>
        <form>
            <div class="form-group">
                <label for="emailInput">E-mail</label>
                <input type="email" class="form-control" id="emailInput" placeholder="E-mail">
            </div>
            <div class="form-group">
                <label for="passwordInput">Senha</label>
                <input type="password" class="form-control" id="passwordInput" placeholder="Senha">
            </div>
        </form>

        <button class=" btn btn-lg btn-block btn-primary" id="authEmailpassButton">Autenticar</button>
        <button class=" btn btn-lg btn-block btn-info" id="createUserButton">Criar nova conta</button>
        <br>

        <p class="text-center"><small>--ou--</small><p>

        <p class="text-center">
            <button class="btn btn-lg btn-default" id="authGitHubButton"><i class="fa fa-github fa-2x"></i></button>
            <button class="btn btn-lg btn-primary" id="authFacebookButton"><i class="fa fa-facebook fa-2x"></i></button>
            <button class="btn btn-lg btn-info" id="authTwitterButton"><i class="fa fa-twitter fa-2x"></i></button>
            <button class="btn btn-lg btn-danger" id="authGoogleButton"><i class="fa fa-google fa-2x"></i></button>
            <button class="btn btn-lg btn-warning" id="authAnonymousButton"><i class="fa fa-user fa-2x"></i></button>         
        </p>

        <p class="text-center">
            <button class="btn btn-lg btn-default" id="logOutButton">Sair</button>
        </p>

    </div>

    <br><br>
    <a class="button button-clear" href="index.html">Voltar para o Home</a>

    
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    
    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-database.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-auth.js"></script>
    <script src="/js/app.js"></script>
    <script src="/js/authentication.js"></script>
    
</body>

</html>

My code js:

var authEmailPassButton = document.getElementById('authEmailPassButton')
var authFacebooklButton = document.getElementById('authFacebookButton')
var authTwitterButton = document.getElementById('authTwitterButton')
var authGoogleButton = document.getElementById('authGoogleButton')
var authGitHubButton = document.getElementById('authGitHubButton')
var authAnonymousButton = document.getElementById('authAnonymousButton')
var createUserButton = document.getElementById('createUserButton')
var logOutButton = document.getElementById('logOutButton')

var emailInput = document.getElementById('emailInput')
var passwordInput = document.getElementById('passwordInput')

var displayName = document.getElementById('displayName')

createUserButton.addEventListener('click', function(){
    firebase
        .auth()
        .createUserWithEmailAndPassword(emailInput.value, passwordInput.value)
        .then(function(){
            alert('Bem vindo' + emailInput.value)
        })
    .cath(function (error){
        console.error(error.code)
        console.error(erro.message)
        alert('Falha ao cadastrar, verifique o erro no console.')
    })
})

authEmailPassButton.addEventListener('click', function(){
    firebase
        .auth()
        .signInWithEmailAndPassword(emailInput.value, passwordInput.value)
        .then(function(result){
            console.log(result)
            displayName.innerText = 'Bem vindo, ' + emailInput.value
            alert('Autenticado' + emailInput.value)
        })
    .cath(function (error){
        console.error(error.code)
        console.error(erro.message)
        alert('Falha ao autenticar, verifique o erro no console.')
    })
})

javascript html firebase

1 answer

0

Puts the type nos Button

<button class=" btn btn-lg btn-block btn-primary" id="authEmailPassButton" 
type="button">Autenticar</button>`

  • unfortunately it didn’t work

  • Check your id, it’s different "authEmailpassButton" and "authEmailPassButton"

  • putzz, I didn’t realize, I set it now and it’s working! thank you very much!!

Browser other questions tagged javascript html firebase

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