monacaでページを複数に分けたい

前提・実現したいこと

monacaでページを分けたいのですが、上手く動作せず困っています。

発生している問題・エラーメッセージ

<template>タグを使用する方法では、今まで普通に動作していたコードを<template>で囲った瞬間真っ白になってしまいます。
また、ファイルをページごとに分ける方法ではうまく画面の遷移が行われず、１ページ目で止まってしまいました。

該当のソースコード

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
6  <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'">
7  <script src="components/loader.js"></script>
8  <script src="lib/onsenui/js/onsenui.min.js"></script>
9  <link rel="stylesheet" href="components/loader.css">
10  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
12  <link rel="stylesheet" href="css/style.css">
13</head>
14<body>
15  <ons-tabbar id="startscreen" page="startscreen.html"></ons-tabbar>
16    <ons-page id="startscreen">
17      <!--上のツールバー-->
18      <div class="toolbar toolbar--transparent">
19        <div class="toolbar__left">
20          <span class="toolbar-button">
21            <i class="ion-navicon"></i>
22          </span>
23        </div>
24        <div class="toolbar__center">
25        </div>
26        <div class="toolbar__right">
27          <img src="settingbutton.png">
28        </div>
29      </div>
30      <!--タスク名入力ボタン-->
31      <div class=taskinput>
32        <textarea class="textarea" rows="3" placeholder="タスク名を入力"></textarea>
33      </div>
34      <!--スタートボタン-->
35      <div class="sw_taskscreen">
36        <ons-button id="startbutton">開始</ons-button>
37      </div>
38    </ons-page>
39  <script src="css/script.js"></script>
40</body>
41</html>
42

html
1  <ons-navigator id="taskscreen.html"></ons-navigator>
2    <ons-page id="taskscreen.html">
3      <div class="sw_startscreen">
4        <ons-button id="stopbutton">終了</ons-button>
5      </div>
6   </ons-page>

CSS
1.toolbar-button{
2  color: gray;
3  font-size:32px;
4  position: relative;
5  top: 10px;
6}
7.toolbar__right img{
8  width: 25px;
9  height: 25px;
10  position: relative;
11  top: 16px;
12  right: 8px;
13}
14.toolbar:hover{
15  color: red;
16}
17.textarea{
18  width: 75%;
19  height: 100%;
20  position: relative;
21}
22.textarea::placeholder{
23  text-align:center;
24}
25.taskinput{
26  height: 444 px;
27  text-align:center;
28  margin-top: 15%;
29}
30.ons-page{
31  background-color: white;
32}
33.toolbar__right img:active{
34  opacity: 0.3;
35}

javascript
1    ons.ready(function() {
2      console.log("Onsen UI is ready!");
3    });
4    if (ons.platform.isIPhoneX()) {
5      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
6      document.documentElement.setAttribute('onsflag-iphonex-landscape', ''); 
7    }
8    document.addEventListener('init', function(event) {
9      var page = event.target;
10
11      if (page.matches('#startscreen')) {
12
13        page.querySelector('#startbutton').onclick = function() {
14          document.querySelector('#startscreen').pushPage('taskscreen.html');
15        };
16
17      } else if (page.matches('#taskscreen')) {
18
19        page.querySelector('#stopbutton').onclick = function() {
20          document.querySelector('#startscreen').popPage();
21        };
22
23      }
24    });
25