导入 HTML 后 eventListener 不起作用

Question

I got this app in progress:

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

So, I'm working with web pack and I'm trying to hold everything in different files. My HTML should be pretty basic for this ToDO app, so I'm trying to make just a few divs and change the content with JS.

So, I have this HTML code in a different js file and I import it in the index.js and then it goes to 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;

Everything good, I import it and it works HTML wise but JS doesn't recognise it I think.

I get a null error at first eventListener

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

But if I put the HTML directly, without importing it, it works just fine. How can I solve this?

TL:DR: HTML imported gives null error.

Cheers

Answer 1

You're trying to add an eventListener when the HTML code for that particular id doesn't exist yet. That's why it returns as null. Make sure that you add the eventListener to the js file that contains the const createProject like this:

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;