js not working or navigation not working in in page2

[anthony]

Hi Team ,

first I have page1 , then I have onlick on navi then puspage to page2.
then in page2 I have wanna to go to page3 on click but its not working , even alert function is not working in the onclick.

<ons-page id="single">
  <ons-navigator id="single_navigator"></ons-navigator>

  <script type="text/javascript">
    document.addEventListener('init', function(event) {
      var page = event.target;
      page.querySelector('ons-toolbar .center').innerHTML = page.data.title;
    });

    function goToEventDetailsPage(){
      let single_navigator = document.querySelector('#single_navigator');
        single_navigator.replacePage('event_detials2.html');
        alert("asd");

    }
    $(document).ready(function(){
      
    });
  </script>

  <ons-toolbar>
    <div class="left"><ons-back-button> 返回</ons-back-button></div>
    <div class="center"></div>
  </ons-toolbar>

  <p onclick="goToEventDetailsPage()">This is the second page.</p>
</ons-page>

page2 as above below are screen capture

either alert and replacepage or push page is not working , how can I call this function ?
because this function is not calling I suspect thanks