There are two html pages, the index.html and bankPage.html, I am trying to validate the user using a password on index.html and then if the password is right, he moves to bankPage.html page. With window.location(or location) I am able to move to bankPage.HTML but after moving to the HTML page I get a TypeError becoz the button that I selected holds a value null in bankPage.html and the button is defined in index.html.

The error I get is- Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

Here is the code

//just an array that holds the user info in objects(array of objects)
const accounts = [account1, account2, account3, account4];

const btnLogin = document.querySelector('.login__button');
const inputLoginUsername = document.querySelector('.login__input--user');
const inputLoginPassword = document.querySelector('.login__input--password');

// Even handlers for logging in from the index page to the bank page

let currentAccount;

btnLogin.addEventListener('click', function (e) {
  e.preventDefault();

  currentAccount = accounts.find(function (acc) {
    return acc.owner === inputLoginUsername.value;
  });

  if (currentAccount?.password === inputLoginPassword.value) {
    //send to another page
    window.location = 'bankPage.html';
    
  }
});