开发者问题收集

TypeError：当我想向数据库添加新元素时，无法读取 null 的属性“addEventListener”

2021-06-29
81
javascript html firebase firebase-realtime-database

我创建了一个表单来从身份验证用户那里创建新帖子，但是我收到此错误“未捕获 TypeError：无法读取 null 的属性‘addEventListener’” 并且似乎不知道为什么 我的脚本位于 HTML 的末尾，它是一个外部文件，我在其他地方使用过 eventListener，它工作得很好。我甚至检查过拼写错误，但无济于事。 

const createForm = document.querySelector('#create-form');
  createForm.addEventListener('submit', (e) => {
   console.log("hey you clicked p")
     e.preventDefault();
      db.collection('guides').add({
       title: createForm['title'].value,
        content: createForm['content'].value
   }).then(() => {
    // close the create modal & reset form
     const modal = document.querySelector('#modal-create');
      M.Modal.getInstance(modal).close();
       createForm.reset();
   }).catch(err => {
    console.log(err.message);
    });
 });

这是我的 html 

<!-- CREAT A NEW POST -->
<div id="modal-create" class="modal">
   <form class="modal-content animate"  method="post">
    <div>
    <span onclick="document.getElementById('modal-create').style.display='none'" class="close" title="Close Modal">&times;</span>
  </div>
  <div class="container">
    <h4>Create Post</h4><br/>
    <form id="create-form">
      <div class="input-field">
        <input type="text" id="title" required>
        <label for="title">The Subject</label>
      </div>
      <div class="input-field">
        <textarea id="content" class="materialize-textarea" required></textarea>
        <label for="content">The Content</label>
      </div>
      <button class="btn yellow darken-2 z-depth-0">Create</button>
</form>
2个回答

您的表单中又包含表单，这很糟糕，我认为在这种情况下，是拼写错误

尝试删除 <form class="modal-content animate" method="post"> ，看看是否可以解决问题

Kinglish
2021-06-29
const createForm = document.querySelector('#form_submit');
  createForm.addEventListener('click', (e) => {
   console.log("hey you clicked p")
     e.preventDefault();
      db.collection('guides').add({
       title: createForm['title'].value,
        content: createForm['content'].value
   }).then(() => {
    // close the create modal & reset form
     const modal = document.querySelector('#modal-create');
      M.Modal.getInstance(modal).close();
       createForm.reset();
   }).catch(err => {
    console.log(err.message);
    });
 });

<html>
<head>
</head>
<body>
<!-- CREAT A NEW POST -->
<div id="modal-create" class="modal">
   <form class="modal-content animate"  method="post">
    <div>
    <span onclick="document.getElementById('modal-create').style.display='none'" class="close" title="Close Modal">&times;</span>
  </div>
  <div class="container">
    <h4>Create Post</h4><br/>
    <form id="create-form">
      <div class="input-field">
        <input type="text" id="title" required>
        <label for="title">The Subject</label>
      </div>
      <div class="input-field">
        <textarea id="content" class="materialize-textarea" required></textarea>
        <label for="content">The Content</label>
      </div>
      <button type='submit' class="btn yellow darken-2 z-depth-0" id="form_submit">Create</button>
</form>
</body>
</html>

尝试一下，不会出现该错误

Amir Ahmed
2021-06-29