monaca js セレクトタブ valueによる分岐ができない

monacaのonsenUIを利用し、アプリ開発をしております。
page1では、#btnがクリックされるとselectタブのvalue(=ページ遷移先)が取得されるようにしております。

selectタブが変更されてない状態(value=0の状態)で#btnを押したときに、alertで「選択してください」と表示させ、他が選択された場合は、valueを取得しページ遷移させたいのですが、if文を挿入したものの、動きません。どのようにしたら動くかご指摘いただけますでしょうか。

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    // Page init event
    document.addEventListener('init', function(event) {
      var page = event.target;

      if (page.matches('#first-page')) {

        page.querySelector('#btn').onclick =
        function() {
          let select = document.getElementById('select').value;
          if (select==='0') {
            alert('選択してください');
          } else if {
            document.querySelector('#navigator').pushPage(select); 
          }         
        };

      } else if (page.matches('#second-page')) {

        page.querySelector('#pop-button').onclick = function() {
          document.querySelector('#navigator').popPage();
        };

      }
    });

    if (ons.platform.isIPhoneX()) {
      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
    }
  </script>
</head>
<body>
  <ons-navigator id="navigator" page="page1.html"></ons-navigator>

  <ons-template id="page1.html">
    <ons-page id="first-page">
      <ons-toolbar>
        <div class="center">fixy</div>
      </ons-toolbar>

      <div class="content" style="text-align: center">
        <h1>
          ホーム
        </h1>
        <div class="selectwrapper">
          <ons-select id="select">
            <option value="0">選択してください</option>
            <option value="page2.html">page2</option>
          </ons-select>
        </div>
        <ons-button id="btn">GO!</ons-button>
      </div>
    </ons-page>
  </ons-template>

  <ons-template id="page2.html">
    <ons-page id="second-page">
      <ons-toolbar>
        <div class="left"><ons-back-button>Page 1</ons-back-button></div>
        <div class="center">Page 2</div>
      </ons-toolbar>

      <div class="content" style="text-align: center">
        <p>This is the second page.</p>
        <ons-button id="pop-button">Pop page</ons-button>
      </div>
    </ons-page>
  </ons-template>
</body>
</html>

コード