document.location.href followed by document.getElementById does not work

When i do a document.location.href to go to another HTML page and then try to modify elements in the new page (which I would use getElementById for), I get that the element is not found in the webpage. I think it is because the new page is not fully loaded yet and it is looking in the previous HTML page.. Any idea how I can fix this issue?
For example:

async function navigateToAccount(accId, userStatus, userBalance) {
  //fetch account information
  try {
    const token = localStorage.getItem('token')
    const response = await fetch(
      'someapi/api/getAccountDetails/' + accId,
      {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${token}`,
        },
      }
    )
    const data = await response.json()
    if (data.status == false) {
      throw new Error(data.message)
    }
    window.location.href = 'accountPage.html'
//the below is not executing
    const accountName = document.getElementById('accountPageName')
    accountName.textContent = localStorage.getItem('name')
    const accountBalance = document.getElementById('accountPageBalance')
    accountBalance.textContent = userBalance
    const ccNumber = document.getElementById('accountPageccNumber')
    ccNumber.textContent = data.account.creditCard.number
    const ccName = document.getElementById('accountPageccName')
    ccName.textContent = localStorage.getItem('name')
    const ccExp = document.getElementById('accountPageccExp')
    ccExp.textContent = data.account.creditCard.expiryDate
    const ccCvv = document.getElementById('accountPagecccvv')
    ccCvv.textContent = data.account.creditCard.cvv
  } catch (err) {
    console.log(err.message)
  }
}

I would get an error saying that element with Id accountPageName is not found.

You can do two things.

First, you request the data from the current page, then you invoke the new page and pass it the data. This is what you would have done with your code, but incorrectly. I think this is cumbersome and unnecessary. (bad)

Second, you open the new page, pass the user ID to it if necessary - although I think it can be queried - and that's all we need to do on the current page because we redirected the user to a new file. On the new page, you then download the user data. (better)

(I would choose this approach for another reason as well. Just imagine if you want to redirect the user to the accountPage.html from another file. Then, would you have to encode the data retrieval again there? That would be code duplication and quite a cumbersome task. Instead, you should encode everything that belongs to it directly into the accountPage.html. If downloading the account data is necessary for the proper display of the page, then you should perform that data retrieval within the accountPage.html.)

home.html

<button onclick="navigateToAccount(123)">Go to My Account</button>

/**
 ** Will run when loaded home.html and click to button
 */
function navigateToAccount(accId) {
  window.location.href = `../accountPage.html?accId=${accId}` // redirect to new html file and here end current request
}

accountPage.html

<div id="accName">Loading...</div>

/**
 ** Will run when loaded accountPage.html
 */

// Get Params from URL (http://example.com/accountPage.html?accId=123)
// - after it can call params.accId what is return 123
const params = new Proxy(new URLSearchParams(window.location.search), {
  get: (searchParams, prop) => searchParams.get(prop),
})

let accountDetails = null

async function getAccountDetails(accId) {
  const response = await fetch(`http://example.com/api/getAccountDetails/${accId}`) // wait API response 
  accountDetails = await response.json() // save API answer

  // call print method
  printAccountDetails()
}

// print texts to divs
function printAccountDetails() {
  document.getElementById('accName').innerText = accountDetails?.accName ?? 'unknown'
}

// Call get method after DOM loaded fully
window.addEventListener("DOMContentLoaded", (event) => {
  getAccountDetails(params.accId)
})

More information

Jumping to a new HTML page with JavaScript - StackOverflow Answer<br>
How can I get query string values in JavaScript - StackOverflow Answer<br>
Using the Fetch API in JavaScript - MDN Docs

await - Wait process end - MDN Docs<br>
async function - What need to await using - MDN Docs

DOMContentLoaded event - MDN Docs