How to retrieve element from on popstate event?

I am working on Angular 16 and have want to push event related data to backend system. For example when user clicks on button then will pass some information about the event.

I have two pages FirstPage and SecondPage and using Angular router to navigate between them. When FirstPage rendered it register all the events using javascript. Now user clicks on given link and land to SecondPage, URL changed to FirstPage to SecondPage.

But if user clicks the back button of browser, then initially I was expecting the document.load or window.load event will fire but it's not. Now, If I am trying to get the element on the popstate event it giving me null. How can I get the element?

window.addEventListener("popstate", (event) => registerEvents(event));

window.addEventListener("load", (event) => registerEvents(event));

function registerEvents(e){
console.log(e);
let substanceBtn = document.getElementById("substance");
console.log(substanceBtn)
if(null != substanceBtn){
console.log('1');
substanceBtn.addEventListener("click", function(e){
console.log(e.target);
});
}
}

First Page:
<nav class="navbar navbar-expand-lg navbar-light bg-light bg-primary" style="background-color: #e3f2fd !important;">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#" id="test" routerLink="/secondPage">Second Page</a>
</li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>

Second Page:

<div><h1>Substances</h1></div>

<div class="row">
<div class="col-sm-1">Second Page</div>
</div>

Continue reading...