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

【问题标题】：TypeError: Cannot read property 'addEventListener' of null when i want to add new elements to my databaseTypeError：当我想将新元素添加到我的数据库时，无法读取 null 的属性“addEventListener”
【发布时间】：2021-06-29 09:02:03
【问题描述】：

我创建了一个表单来创建来自身份验证用户的新帖子，但是我收到此错误“未捕获的类型错误：无法读取属性 'addEventListener' of null” 而且似乎不知道为什么我的脚本位于 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>

【问题讨论】：

你的脚本标签相对于 HTML 正文在哪里？
您的 HTML 无效，nested forms are not allowed “允许的内容：流式内容，但不包含 <form> 元素”。将外部表单标记重命名为 div，然后您的代码可能有效。浏览器实际上是在移除嵌套的表单元素，但保留这些表单的内容，这就是为什么 JS 无法找到具有给定 id 的表单。
是的，这是导致问题的第一个表单，谢谢

标签： javascript html firebase firebase-realtime-database

【解决方案1】：

表单中有一个表单，这很糟糕，我认为在这种情况下是一个错字

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

【讨论】：

这只会撤消我的 CSS 它不会影响代码
谢谢你，它工作得很好，只需将第一个表单更改为 div

【解决方案2】：

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>

试试这个不会报错

【讨论】：

这确实消除了问题，但是数据库没有使用我输入的新内容进行更新，并且 console.log 也没有显示“你点击了 p”，这意味着问题仍然存在