TypeError:无法读取属性'addEventListener'当我想向数据库中添加新元素时，为nu

我创建了一个表单来从auth用户创建新帖子，但我收到了这个错误"Uncaught 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>

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

试着移除<form class="modal-content animate" method="post">，看看这是否会清除

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>

试试这个，它不会给出错误

相关内容

最新更新

热门标签：