Getting a: Cannot read properties of null error in Javascript when adding an event listener

Question

I'm trying to check whether a user has added at least 8 characters in a password field and add some validation text if they've not but I'm getting this in my console: script.js:13 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at script.js:13:17

I believe it relates to this line:

confirmPassword.addEventListener('change', checkPassword);

Full code:

let password = document.querySelector('#password');
let confirmPassword = document.querySelector('#confirm_password');
let passwordValidation = document.createElement('p');
let passwordValidationText = ''

passwordChecker => {
if (password.length <8) {
passwordValidationText === 'Please enter a password, longer than 8 characters';
password.appendChild(passwordValidation);
}
};

confirmPassword.addEventListener('change', passwordChecker);

And the input fields:

<label for="password">Password</label>
        <input type="password" id="password" name="password">
        </div>
        <div class="item">
        <label for="confirm_password">Confirm password</label>
        <input type="password" id="confirm_password" name="confirm_password">

My thinking being I only want to validate when the user has finished typing.

Any idea what I'm doing wrong?

When does your script run? Could it be before the DOM has loaded? — mykaf, Jun 30 '22 at 20:09
The name of the function is `passwordChecker`, not `checkPassword`. — Barmar, Jun 30 '22 at 20:09
Please provide the whole HTML File. Maybe the script is loaded before the HTML itself. — Shachar297, Jun 30 '22 at 20:11
Yes thank-you @user1599011 I added async to the script being called in html and it sorted that issue! — Sam Jefferies, Jun 30 '22 at 20:13
Check this line let confirmPassword = document.querySelector('#confirm_password'); 100% your id is not rendered at the moment you try to get it i.e. your JS is called before html with id is rendered(also check is your id correct). Change order and lift up html render — Dmitriy Sakhno, Jun 30 '22 at 20:13

Getting a: Cannot read properties of null error in Javascript when adding an event listener

0 Answers0