-1

I'm new to JS and Firebase so my question is probably very easy, but I couldn't find anything on the WEB that would answer my question.

I'm working with the firebase tutorial available on youtube. The code I have to capture username and password and pass it to firebase looks like this:

btnLogin.addEventListener('click', e => {
    const email = txtEmail.value;
    const pass =txtPassword.value();
    const auth = firebase.auth();
    const promise = auth.signInWithEmailAndPassword(email,pass);
    promise.catch(e => console.log(e.message));

});

I'm using webstorm and it getting errors on "=>" and first.

When I try to run this anyway I'm getting 

"app.js:19 Uncaught TypeError: Cannot read property 'addEventListener' of null"

which lead to the same "=>"

can someone please explain what this is and how to use it? or point me in the right direction to where to look for more information. when I try to google it I'm always getting logic related topics (ass comparisons).

I'm a real noob in JS so please take it easy on me...

EDIT:

I managed to get the webstorm to work - thanks!

But I'm still getting the same error when the page loads:

"app.js:19 Uncaught TypeError: Cannot read property 'addEventListener' of null"

CODE: app.js:

(function () {
console.log("start");
    //get elements
    const txtEmail = document.getElementById("txtEmail");
    const txtPassword = document.getElementById("txtPassword");
    const btnLogin = document.getElementById("btnLogin");
    const btnSignUp = document.getElementById("btnSignUp");
    const btnLogOut = document.getElementById("btnLogOut");

    //add login event
    btnLogin.addEventListener("click", e => {
        const email = txtEmail.value;
        const pass =txtPassword.value;
        const auth = firebase.auth();
        const promise = auth.signInWithEmailAndPassword(email,pass);
        promise.catch(e => console.log(e.message));
});
}());
index.html:
<div class="container">

    <form class="form-signin">
        <h2 class="form-signin-heading">Please sign in</h2>
        <input type="inputEmail" id="txtEmail" class="form-control" placeholder="Email address" required autofocus>
        <input type="inputPassword" id="txtPassword" class="form-control" placeholder="Password" required>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="remember-me"> Remember me
            </label>
        </div>
        <button id="btnLogIn" class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
        <button id="btnSignUp" class="btn btn-lg btn-primary btn-block" type="submit">Sign Up</button>
        <button id="btnLogOut" class="btn btn-lg btn-primary btn-block hide" type="submit">Log Out</button>
    </form>
</div>
<script src="src/app.js"></script>
mancuss
  • 365
  • 1
  • 4
  • 14
  • 2
    Have you even selected the element in var btnLogin using document.getElementById ? – Debanjan Dhar Aug 21 '16 at 17:41
  • 2
    It's an ES2015 ("ES6") *arrow function*. These are relatively new, having been added in June 2015. WebStorm just needs to be told that you're using ES2015 rather than ES5 or earlier. If you may deploy this code as-is to browsers, be aware that modern browsers support it, but it's still quite new and lots of people are using only slightly out-of-date browsers that don't support it yet. – T.J. Crowder Aug 21 '16 at 17:42
  • Thanks @T.J.Crowder this fixed my problem with webstorm, but I'm still getting 'Uncaught TypeError: Cannot read property 'addEventListener' of null'. YEs I have all the elements selected using getElementById – mancuss Aug 21 '16 at 18:21
  • @T.J.Crowder: The issue here is not the arrow function - that was a red herring. (Although I agree that it may be better to use a conventional function.) The problem is that `btnLogin` is `null` because of the mismatched capitalization between the JS and HTML. – Michael Geary Aug 21 '16 at 20:45
  • @MichaelGeary: That was only made obvious by a subsequent edit. – T.J. Crowder Aug 21 '16 at 21:50

1 Answers1

-1

I believe you are missing the parentheses around the e as this is a ES6 arrow function eg

btnLogin.addEventListener('click', (e) => {

Don't forget you'd also need to add

Use strict

To the top of your js for this to also work

**updated answer ** The problem is to do with your id of your button. In your html you have it as btnLogIn but in your js you are looking for btnLogin they need to be the same.

Tom Maton
  • 1,564
  • 3
  • 23
  • 41
  • No, if there's only a single argument, the parens are optional. And no, you don't need "use strict" to use ES2015 features. You did, for a couple of months, in Chrome, but that was an implementation thing. It's not part of the language, and it's no longer the case in Chrome (which is to say, in V8). – T.J. Crowder Aug 21 '16 at 20:06
  • @T.J.Crowder that must be a WebStorm thing then as I keep getting a message that 'use strict' required to use ES6 features. Ah yes your right about the single arg my mistakes. – Tom Maton Aug 21 '16 at 20:09
  • I tried everything in here and I still can't get this to work... I have my js at the end of the html file (in body) and I'm getting TypeError: Cannot read property 'addEventListener' of null when the page loads... any help please? – mancuss Aug 21 '16 at 20:21
  • @mancuss can you please give more information on the rest of the code. Eg js and html. – Tom Maton Aug 21 '16 at 20:23
  • 1
    @mancuss the problem is to do with your id of your button. In your html you have it as btnLogIn but in your js you are looking for btnLogin they need to be the same. – Tom Maton Aug 21 '16 at 20:40
  • @T.J.Crowder this isn't a duplicate as the answer isn't relating to the duplicate question. – Tom Maton Aug 21 '16 at 20:41
  • 2
    @mancuss: Tom's comment is right on the money. The error you got indicates that `btnLogin` has a `null` value. If you set a breakpoint on the `addEventListener` line and stop in the debugger, you would see the values of your variables. I highly recommend doing that when you run into a problem like this. – Michael Geary Aug 21 '16 at 20:48