Onsen UI のページ遷移がうまくいかない

Onsen UI のページ遷移がうまくいきません
下記内容になります。
よろしくお願いします。

実現したいこと

「index.html」の「icon_menu.svg」をタップ
「menu.html」がひらく、「Push page」をタップ
「guide.html」がひらく
「guide.html」の「閉じる」をタップ
「index.html」に戻る

困っていること

現状のコードでは、4.「guide.html」の「閉じる」をタップしても動作しません。

コード

html
1<ons-navigator swipeable id="myNavigator" page="index.html">
2    <ons-page id="index">
3    テストテスト
4    <ons-button id="push-button"><img class="" src="img/icon_menu.svg"></ons-button>
5    </ons-page>
6</ons-navigator>
7  
8  <template id="menu.html">
9    <ons-page id="menu">
10      <ons-toolbar>
11        <div class="left"><ons-back-button></ons-back-button></div>
12        <div class="center">メニュー</div>
13      </ons-toolbar>
14  
15      <p>This is the page.</p>
16  
17      <ons-button id="push-button">Push page</ons-button>
18    </ons-page>
19  </template>
20  
21  <template id="guide.html">
22    <ons-page id="guide">
23      <ons-toolbar>
24        <div class="left"><ons-back-button></ons-back-button></div>
25        <div class="center">使い方</div>
26        <div class="right"><ons-button id="push-button">閉じる</ons-button></div>
27    </ons-toolbar>
28      <p>This is the second page.</p>
29    </ons-page>
30  </template>

JavaScript
1document.addEventListener('init', function(event) {
2  var page = event.target;
3
4  if (page.id === 'index') {
5    page.querySelector('#push-button').onclick = function() {
6      document.querySelector('#myNavigator').pushPage('menu.html', { animation : 'lift' } ,{data: {title: 'menu'}});
7    };
8  } 
9
10  if (page.id === 'menu') {
11    page.querySelector('#push-button').onclick = function() {
12      document.querySelector('#myNavigator').pushPage('guide.html', { animation : 'slide' } ,{data: {title: 'guide'}});
13    };
14  } 
15
16  if (page.id === 'guide') {
17    page.querySelector('#push-button').onclick = function() {
18      document.querySelector('#myNavigator'). resetPage('index.html',{data: {title: 'index'}});
19    };
20  } 
21
22});
23