javascript - firebase auth.js:12未捕获的TypeError:无法读取未定义的属性“close”

标签 javascript html firebase

我是html和js的初学者。尝试注册新用户时出现以下错误。互联网上发现的所有问题都没有帮助我找到解决方案:

Uncaught TypeError: Cannot read property 'close' of undefined
    at auth.js:22
    at r.g (auth.js:19)
    at Dt (auth.js:22)
    at Ct (auth.js:22)
    at mt.t.Ub (auth.js:21)
    at vt (auth.js:15)


这是index.html:

<html>

<head>


<title> First test </title>
  <!-- Load library: The core Firebase JS SDK is always required and must be listed first -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.css">
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
<!-- Load library: Add additional services you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-firestore.js"></script>
  <!-- Load library: Authentification -->
  <script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-auth.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
    var firebaseConfig = {
      apiKey: "**********",
      authDomain: "**********",
      databaseURL: "************",
      projectId: "**********",
      storageBucket: "****************",
      messagingSenderId: "**********"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    var firestore = firebase.firestore();
    firestore.settings({
      timestampsInSnapshots: true
    });
    const auth = firebase.auth();
  </script>




</head>

<!-- Authentificate a new user -->


<div id="modal-signup" , class='modal'>
  <div class='modal-content'>
    <h4> Sign Up </h4><br />
    <form id='signup-user'>
      <div class='input-field'>
        <input type='email' id="signup-email" />
        <label for='signup-email'> email adress </label>
      </div>
      <div class='input-field'>
        <input type='password' id="signup-password" />
        <label for='signup-password'> password </label>
      </div>
      <button id='signup-button' type='submit'>sign up</button>
    </form>
  </div>
</div>


<script src='./auth.js'></script>

</html>


<!-- <script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-storage.js"></script> -->



还有auth.js脚本

// values from the firebase console
const signupForm = document.querySelector('#signup-user');



  // Sign up function 


signupForm.addEventListener("submit", (e) => {

  e.preventDefault(); // avoid the page to refresh when we click signup

  // get user info from the id of the input
  const email = signupForm['signup-email'].value;
  const password = signupForm['signup-password'].value;
  auth.createUserWithEmailAndPassword(email, password).then( cred => {

      console.log(cred);
      const modal = document.querySelector('#modal-signup');
      console.log(modal)
      M.Modal.getInstance(modal).close();
      signupForm.reset();
      // div id
    });

});



我认为问题出在M.Modal.getInstance(modal).close();行。看来modal未定义。但是,当我用console.log登录时,变量modal存在。

最佳答案

您没有初始化模态,只需进行以下更改:

const modal = document.querySelector('#modal-signup');
var instance = M.Modal.init(modal);
M.Modal.getInstance(instance).close();


您也没有使用物化CSS和脚本链接:

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Modal Structure -->

关于javascript - firebase auth.js:12未捕获的TypeError:无法读取未定义的属性“close”,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59248729/

相关文章:

javascript - 在 AngularJs Controller 中使用外部类

javascript - 使用自动提交设置 jQuery cookie

Javascript 绑定(bind)与其实例一起使用

javascript - 获取 DIV ID 然后更改 href 值

html - 如何检测横向模式并使用 css、查询或 js 隐藏 html 内容

jquery - 将元素拉伸(stretch)到填充的流体父级的全宽

java - 如何从 firebase 分配增量 ID 号

sql - 是否可以使用标准 SQL 在 Google BigQuery 中安排查询,以便日期范围在运行时每天递增?

javascript - Angular - ui-router 状态不被识别

javascript - 您如何使用安全规则来防止用户伪造 Firebase.ServerValue.TIMESTAMP?