【Monaca】画面遷移時にjavaScriptが実行(反映？)されない

【Monaca】画面遷移時に特定のタグのテキストを変更したい

Monacaでのアプリ開発をしたいと思っているのですが以下事象が解決できないため質問させてください。
言語：html, javaScript

事象

ボタンを押して画面を遷移する際、遷移する先の画面に設定しているテキストを変更したいが反映されない。

該当のソースコード

javaScript
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
14
15  <script>
16    // Page init event
17    document.addEventListener('init', function(event) {
18      var page = event.target;
19
20      if (page.matches('#first-page')) {
21
22        page.querySelector('#push-button').onclick = function() {
23          document.querySelector('#navigator').pushPage('page2.html');
24        };
25      } 
26    });
27
28    if (ons.platform.isIPhoneX()) {
29      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
30      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
31    }
32
33    function jstest() {
34      const test = document.getElementById('test-id');
35      test.textContent = 'テスト';
36  }
37  </script>
38</head>
39<body>
40  <ons-navigator id="navigator" page="page1.html"></ons-navigator>
41
42  <ons-template id="page1.html">
43    <ons-page id="first-page">
44      <ons-toolbar>
45        <div class="center"></div>
46      </ons-toolbar>
47
48      <div class="content" style="text-align: center">
49        <ons-button id="push-button" onclick="jstest();">button</ons-button>
50      </div>
51    </ons-page>
52  </ons-template>
53
54  <ons-template id="page2.html">
55    <ons-page id="second-page">
56      <ons-toolbar>
57        <div class="left"><ons-back-button>戻る</ons-back-button></div>
58        <div class="center">戻る</div>
59      </ons-toolbar>
60
61      <div class="content" style="text-align: center">
62          <div id="test-id">test</div>
63          <ons-button onclick="jstest();">button</ons-button>
64      </div>
65    </ons-page>
66  </ons-template>
67</body>
68</html>
69

該当箇所

javascript
1<div class="content" style="text-align: center">
2    <ons-button id="push-button" onclick="jstest();">button</ons-button>
3</div>

上記の「id=push-button」を押した時に「jstest()」を実行させて、「<div id="test-id">test</div>」のテキスト部分を「”テスト”」に変更したいのですがうまく反映されません。。

遷移先の画面に配置したボタン「<ons-button onclick="jstest();">button</ons-button>」を押すとテキストが変更されるので、javaScriptのコード自体には問題はないと思っています。

読み込む場所が悪いのかと<script>の場所を<body>の一番下などに持ってきても変わりませんでした。。

プログラム初心者のためうまくまとめられていませんがご教授ください。
情報に不足があれば追記させていただきますので、よろしくお願いいたします。

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

回答2件

ベストアンサー

javascript
1page.querySelector('#push-button').onclick = function() {
2    document.querySelector('#navigator').pushPage('page2.html');
3};

ここでクリック時の動作を書いてしまっているため、ons-buttonにあるonclickはおそらく実行されていません。

また、別の問題として2ページがまだ生成されていないので document.getElementById('test-id'); としても要素を取得できていないと思います。

投稿2019/07/28 04:38

mistn

総合スコア1191

mash-

2019/07/28 06:45

mistnさん、ご回答ありがとうございます。そもそも動いていなかったんですね。。２ページ目も生成されていないとのことで、・<script>タグを<body>の一番後ろに移動・「document.querySelector('#navigator').pushPage('page2.html');」のあとに「jstest();」を追加をしてみたのですがやはり動作は変わりませんでした。。記述場所の問題ではないのでしょうか..？

mistn

2019/07/28 07:27

pushPageのすぐ後に呼び出してもページが生成し終わっていないので機能しません。ページが生成し終わったタイミングでjstestを呼び出す必要があります。

mash-

2019/07/28 12:26

[addEventListener]の最後にjstestを呼び出すことで期待通りに動作しました！ご教授ありがとうございました。

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

最終的に動作したコードを記載しておきます。

javascript
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
14</head>
15<body>
16  <ons-navigator id="navigator" page="page1.html"></ons-navigator>
17
18  <ons-template id="page1.html">
19    <ons-page id="first-page">
20      <ons-toolbar>
21        <div class="center"></div>
22      </ons-toolbar>
23
24      <div class="content" style="text-align: center">
25        <ons-button id="push-button">button</ons-button>
26      </div>
27    </ons-page>
28  </ons-template>
29
30  <ons-template id="page2.html">
31    <ons-page id="second-page">
32      <ons-toolbar>
33        <div class="left"><ons-back-button>戻る</ons-back-button></div>
34        <div class="center">戻る</div>
35      </ons-toolbar>
36
37      <div class="content" style="text-align: center">
38          <div id="test-id">test</div>
39          <ons-button onclick="jstest();">button</ons-button>
40      </div>
41    </ons-page>
42  </ons-template>
43  <script>
44    // Page init event
45    document.addEventListener('init', function(event) {
46      var page = event.target;
47
48      if (page.matches('#first-page')) {
49
50        page.querySelector('#push-button').onclick = function() {
51          document.querySelector('#navigator').pushPage('page2.html');
52        };
53      } 
54      jstest();
55    });
56
57    if (ons.platform.isIPhoneX()) {
58      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
59      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
60    }
61
62    function jstest() {
63      const test = document.getElementById('test-id');
64      test.textContent = 'テスト';
65    }
66  </script>
67</body>
68</html>
69