Question

我正在开发此应用程序：

因此，我正在使用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：DR：导入的HTML会给出空错误。

欢呼

Answer 1

当该特定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;

导入HTML后，eventListener不起作用

1 个答案: