Email verificator not working

Hello, I am new to js and coding in general. I am making a website using html css and js and I’ve run into a problem. To summarise it, I am following along a tutorial to verify you are using the correct format to put in your email. However, my code works completely fine when my javascript is inside the html file using but when I put the file externally for some reason it doesn’t work, this is the relevant code:

HTML: <form action="#"> <input onkeyup="check()" type="text" id="email" placeholder="Email Address" autocomplete="off"> </form> Javascript: const email = document.querySelector("#email"); let regExp = /^[^ ][email protected][^ ]+\.[a-z]{2,3}$/; function check(){ if(email.value.match(regExp)) { console.log(true) } else { console.log(false) }; };

For now please ignore that it only logs true or false, I am able to do everything besides the issue, and the issue at hand is that when I press a key and it says in the console “caught TypeError: Cannot read properties of null (reading ‘value’)” however when the javascript file is internal within the html this error does not occur and it works fine.