JavaScript firebase "=>" in addEventListener

Question

我是JS和Firebase的新手，所以我的问题可能很容易，但是我在WEB上找不到任何可以回答我的问题的东西。

我正在使用youtube上的firebase教程。捕获用户名和密码并将其传递给firebase的代码如下所示:

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));

});

我正在使用webstorm，它得到错误的"=>"和第一。

当我尝试运行这个时，我得到

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

导致相同的"=>"

谁能解释一下这是什么以及如何使用它?或者给我指出正确的方向，去哪里寻找更多的信息。当我尝试谷歌它时，我总是得到与逻辑相关的主题(ass比较)。

我是一个真正的JS新手，所以请让我轻松…

编辑:

我设法让网络风暴工作-谢谢!

但是当页面加载时，我仍然得到相同的错误:

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

代码: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>

Answer 1

我相信你错过了e周围的括号，因为这是ES6的箭头函数eg

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

别忘了你还需要添加

Use strict

放到你的js的顶部，让它也能工作

**更新答案**这个问题与你的按钮id有关。在你的html中，你有btnLogIn，但在你的js中，你要寻找btnLogIn，他们需要是相同的