Javascript eventListener在导入HTML后不工作

我正在使用此应用程序：

所以，我正在使用WebPack，并尝试将所有内容保存在不同的文件中。 对于这个ToDO应用程序，我的HTML应该是非常基本的，所以我尝试只做几个div，并用JS更改内容

因此，我将这个HTML代码放在不同的js文件中，并将其导入index.js，然后转到main.js

const createProject =
`
<div class="container">
<div class="container-header">ADD A PROJECT</div>

<form id='todo-form' action="get">
    <div class="todo-title"><span>Title</span><br><input id='title-input' type="text" name="" id=""></div>
    <div class="todo-description"><span>Description</span><br><input id='description-input' type="text" name="" id=""></div>
    <div class="todo-date"><span>Date</span><br><input id='date-input' type="date"></div>
    <div class="todo-priority"><span>Importance</span><br><input id='range-input' type="range" min='1' max='10' value='5' class='slider' id='myrange'></div>
    <div class="todo-button"><button id='submit-project'>Add project</button></div>
</form>  

</div>
`

export default createProject;

但是如果我直接输入HTML，而不导入它，它就可以正常工作。我怎样才能解决这个问题

TL:DR: 导入的HTML提供空错误

---

干杯

当特定id的HTML代码还不存在时，您正在尝试添加eventListener。这就是它返回为null的原因。确保将eventListener添加到包含const createProject的js文件中，如下所示：

const createProject =
`
<div class="container">
<div class="container-header">ADD A PROJECT</div>

<form id='todo-form' action="get">
    <div class="todo-title"><span>Title</span><br><input id='title-input' type="text" name="" id=""></div>
    <div class="todo-description"><span>Description</span><br><input id='description-input' type="text" name="" id=""></div>
    <div class="todo-date"><span>Date</span><br><input id='date-input' type="date"></div>
    <div class="todo-priority"><span>Importance</span><br><input id='range-input' type="range" min='1' max='10' value='5' class='slider' id='myrange'></div>
    <div class="todo-button"><button id='submit-project'>Add project</button></div>
</form>  

</div>
`

formSubmit.addEventListener('click', (e) =>{
            e.preventDefault();

export default createProject;

---

我不太明白。我找不到任何id为submit project的html元素。您试图选择什么？在createProject中，它是一个div中的表单，其中有一个带有submit project的按钮。我的问题是，我导入JS文件时使用了我放在post中的表单，但当我在按钮或表单本身上放置eventListener时，它会给我null错误。formSubmit变量在哪里定义？我得到了一个空错误-确切的错误是什么？在加载HTML之前，您正在运行const formSubmit=document.querySelector'submit-project'吗？这将导致问题，因此，我有一个按钮，将HTML设置为createProject的HTML。在此之后，我设置const formSubmit。换句话说，HTML在第一次加载页面时是空的，一个按钮将表单放在上面，表单中的一个按钮应该执行smth，但在这里我得到null

const createProject =
`
<div class="container">
<div class="container-header">ADD A PROJECT</div>

<form id='todo-form' action="get">
    <div class="todo-title"><span>Title</span><br><input id='title-input' type="text" name="" id=""></div>
    <div class="todo-description"><span>Description</span><br><input id='description-input' type="text" name="" id=""></div>
    <div class="todo-date"><span>Date</span><br><input id='date-input' type="date"></div>
    <div class="todo-priority"><span>Importance</span><br><input id='range-input' type="range" min='1' max='10' value='5' class='slider' id='myrange'></div>
    <div class="todo-button"><button id='submit-project'>Add project</button></div>
</form>  

</div>
`

formSubmit.addEventListener('click', (e) =>{
            e.preventDefault();

export default createProject;