monacaのonsen uiテンプレートではどこにjavasctiptを書けばいいですか。

以下のコードにおいて、home.htmlというページのナビゲーションバーに時間を表示したいのですが、なぜか表示できません。codepenでは上手く動くので、javascriptを書く場所を間違っているのだと思います。

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
10  <link rel="stylesheet" href="components/loader.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13  <link rel="stylesheet" href="css/style.css">
14  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
15
16  <script>
17    window.fn = {};
18    window.fn.open = function() {
19      var menu = document.getElementById('menu');
20      menu.open();
21    };
22    window.fn.load = function(page) {
23      var content = document.getElementById('content');
24      var menu = document.getElementById('menu');
25      content
26        .load(page)
27        .then(menu.close.bind(menu));
28    };
29
30    if (ons.platform.isIPhoneX()) {
31      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
32      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
33    }
34  </script>
35</head>
36<body>
37<!--ここにスクリプトを書きましたが違うようです-->
38  <script>
39  time();
40    function time(){
41        var now = new Date();
42        document.getElementById("time").innerHTML = now.toLocaleTimeString();
43    }
44    setInterval('time()',1000);
45    </script>
46  <ons-splitter>
47    <ons-splitter-side id="menu" side="left" width="190px" collapse swipeable>
48      <ons-page>
49        <ons-list>
50          <ons-list-item onclick="fn.load('home.html')" tappable>
51            <h5><i class="fas fa-home"></i> Home</h5>
52          </ons-list-item>
53          <ons-list-item onclick="fn.load('settings.html')" tappable>
54            <h5><i class="fas fa-cogs"></i> Settings</h5>
55          </ons-list-item>
56          <ons-list-item onclick="fn.load('about.html')" tappable>
57            <h5><i class="fas fa-chart-line"></i> Chart</h5>
58          </ons-list-item>
59          <ons-list-item onclick="fn.load('about.html')" tappable>
60            <h5><i class="far fa-question-circle"></i></i> How To</h5>
61          </ons-list-item>
62        </ons-list>
63      </ons-page>
64    </ons-splitter-side>
65    <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
66  </ons-splitter>
67
68<!--home.ｈｔｍｌとは以下のことです-->
69  <ons-template id="home.html">
70    <ons-page>
71      <ons-toolbar>
72        <div class="left">
73          <ons-toolbar-button onclick="fn.open()">
74            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
75          </ons-toolbar-button>
76        </div>
77        <div class="center">
78<!--以下一行に書いた内容がナビゲーションバーに表示されます-->
79          <p style="text-align: center;"id="time"></p>
80        </div>
81      </ons-toolbar>
82      
83    </ons-page>
84  </ons-template>
85
86</body>
87</html>

また、codepenでは一応うまく行っていますが、何時何分何秒まで出てしまって、どうしたら何時何分にできるのかわかりません。

1.どこにjsを書けばいいのか

2.何時何分何秒まで出さないにはどうすればいいのか

できれば具体的にこの2点を教えてくださいますでしょうか

行動規範の内容に同意します

回答2件

ベストアンサー

今回の原因はページが作成される前に関数を実行してしまったことです。
addEventListenerを使い、ページ作成後に関数が実行されるようにすれば動くはずです。ons.ready()はなくても動きますがあったほうが安全だと思います。
ちなみに今の状態だとイベントは2回発火されて、1回目の発火の時はエラーが出ます。これは1回目の発火の時点ではhome.htmlのページが作成されていないからです。

js
1ons.ready(function(){
2    document.addEventListener('init', function(event) {
3        time();
4        setInterval(time,1000);
5    }, false);
6});
7
8function time(){
9    var now = new Date();
10    document.getElementById("time").innerHTML = now.toLocaleTimeString();
11}

イベントについては「ページのライフサイクル」を見てください。

投稿2019/11/15 12:29

mistn

総合スコア1191

onse.readyの内側に記述してみると読み込まれないでしょうか？

javascript
1ons.ready(function() {
2    console.log("Onsen UI is ready!");
3    
4    function time(){
5        var now = new Date();
6        document.getElementById("time").textContent = now.toLocaleTimeString();
7    }
8
9    setInterval(time,1000);
10});