javascript - 导入 HTML 后事件监听器不起作用

Question

我正在开发这个应用程序:

https://jsfiddle.net/cg7Lwo29/2/

所以，我正在使用 web pack，并尝试将所有内容保存在不同的文件中。对于这个 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 方式工作，但我认为 JS 无法识别它。

我在第一个 eventListener 处收到空错误

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

但是如果我直接放置 HTML，而不导入它，它就可以正常工作。我该如何解决这个问题？

TL:博士:导入的 HTML 出现 null 错误。

干杯

Answer 1

当该特定 ID 的 HTML 代码尚不存在时，您正尝试添加事件监听器。这就是它返回 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;