toDo.js:4 Uncaught TypeError: Cannot set property 'onclick' of null

Question

I have a problem with the js file. It works perfectly when it is in the html file inside a </ script, but when I put it in a separate file it gives me this error: toDo.js: 4 Uncaught TypeError: Cannot set property 'onclick' of null.

code html:

    <form class="Tasks-to-do">
        <h1> To do </h1>
        <input type="text" id="tasks" placeholder="Tasks" />

        <button id="add"> Add </button>
    </form>

Code Javascript:

var inputTasks = document.querySelector("#tasks");
var buttonTAddTasks = document.querySelector("#add");

buttonTAddTasks.onclick = event => {
    event.preventDefault();
    console.log(inputTasks.value);
}