HTML, CSS, JS Script error. Error Interpretting Stack

Question

I am working on a to-do list application using firebase, but I get the error Script error. Error Interpreting Stack. It has no obvious meaning, so I don't know what to think.

I also tried commenting out all of my JS but I still got the same result. I heard that it could be an external link, but adding crossorigin=anonymous didn't help.

All the code worked for me before, so the error is new to me.

var config = {
  apiKey: "AIzaSyBIV0dPpIwuZadvGfmkIPF7gsykIvt8n4M",
  authDomain: "to-do-332c9.firebaseapp.com",
  databaseURL: "https://to-do-332c9.firebaseio.com",
  projectId: "to-do-332c9",
  storageBucket: "to-do-332c9.appspot.com",
  messagingSenderId: "281739919235"
};
firebase.initializeApp(config);

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

var ref = firebase.database().ref('');

btnLogin.addEventListener('click', e => {  
  document.getElementById('form').classList.add('hide');    

  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));
  
  ref = firebase.database().ref('');
});

btnSignup.addEventListener('click', e => {
  const email = txtEmail.value;
  const pass = txtPassword.value;
  const auth = firebase.auth();

  const promise = auth.createUserWithEmailAndPassword(email, pass);
  promise.catch(e => console.log(e.message));

});

firebase.auth().onAuthStateChanged(firebaseUser => {
  if (firebaseUser) {
    btnLogout.classList.remove('hide');
    document.getElementById('form').classList.add('hide');    
  } else {
    btnLogout.classList.add('hide');
    document.getElementById('messagesTitle').classList.add('hide');
  }
});

.container {
  width: 70%;
  height: 100%;
  background: #87b5ff;
  margin: 10% auto;
  color: #fff;
  padding: 20px;
  border-radius: 10px;
  max-width: 400px;
}

#signin {
  margin: auto;
  padding-top: 10px;
}

.hide {
  display:none;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>To-Do</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="form" class="container">
      <h3>Login</h3>
      <form id="signin">
        <input type="email" class="form-control" id="txtEmail" placeholder="Email">
        <input type="password" class="form-control mb-3" id="txtPassword" placeholder="Password">
      </form>
      <button id="btnLogin" class="btn btn-primary">Login</button>
      <button id="btnSignup" class="btn btn-success">Sign up</button>
      <button id="btnLogout" class="btn btn-info hide">Logout</button>
    </div>
    
    <script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
    <script src="main.js"></script>
  </body>
</html>

You call ref = firebase.database().ref(''); in one event handler but not the other? — Anthony McGrath, Sep 10 '17 at 20:32
Wow! That was a problem?!? That line of code really was the issue! — Sci Ranch, Sep 10 '17 at 20:37
@HarshalCarpenter This key is part of the public configuration of the app. It is not a secret, but a necessary part of the clients ability to find its project on the server. See my answer here for more: https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public — Frank van Puffelen, Sep 10 '17 at 23:50

HTML, CSS, JS Script error. Error Interpretting Stack

0 Answers0