質問編集履歴

1 誤字

3250547

3250547 score 0

2020/07/01 23:02  投稿

monacaのtabber遷移について
### 前提・実現したいこと
ここに質問の内容を詳しく書いてください。  
(例)PHP(CakePHP)で●●なシステムを作っています。  
■■な機能を実装中に以下のエラーメッセージが発生しました。  
monacaで開発を行おうと思っているのですが
ボタンのスケジュール画面への遷移とタブバーによるスケジュール画面の遷移の両方を実装したいのですが、
タブバーでスケジュール画面へ遷移した際のスケジュール画面の戻るボタン、ホームへの遷移ボタンが機能しなくなります。
ホーム画面上で、スケジュール画面を表示しているだけだからなのでしょうか?
ホーム画面のスケジュールボタンを押した際はスケジュール画面の戻るボタン、ホームへの遷移ボタンが機能するのですが。
わかる方解説をおねがいします!
### 発生している問題・エラーメッセージ
```
エラーメッセージ
```
### 該当のソースコード
```html
<!DOCTYPE HTML>
<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>
   document.addEventListener('init', function(event) {
     var page = event.target;
     //ホームページの処理
     if (page.matches('#home-page')) {
       //スケジュールボタン押下
       page.querySelector('#schedule-button').onclick = function() {
         //htmlを表示
         document.querySelector('#navigator').pushPage('schedule.html');
       };
       //目標管理押下
       page.querySelector('#goal-button').onclick = function(){
         document.querySelector('#navigator').pushPage('goal.html');
       };
       //ボディチェック押下
       page.querySelector('#weight-button').onclick = function(){
         document.querySelector('#navigator').pushPage('weight.html');
       };
       //アルバム押下
       page.querySelector('#album-button').onclick = function(){
         document.querySelector('#navigator').pushPage('album.html');
       };
       //カロリータンパク質押下
       page.querySelector('#nutrition-button').onclick = function(){
         document.querySelector('#navigator').pushPage('nutrition.html');
       };
       //プロフィール押下
       page.querySelector('#profile-button').onclick = function(){
         document.querySelector('#navigator').pushPage('profile.html');
       };
     //スケジュールページの処理
     } else if (page.matches('#schedule-page')) {
       //ホームボタン押下
       page.querySelector('#home-button').onclick = function() {
         document.querySelector('#navigator').popPage();
       };
     //目標ページの処理
     }else if(page.matches('#goal-page')){
        page.querySelector('#home-button').onclick = function() {
         document.querySelector('#navigator').popPage();
       };
     
     //ボディチェックページの処理
     }else if(page.matches('#weight-page')){
        page.querySelector('#home-button').onclick = function() {
         document.querySelector('#navigator').popPage();
       };
     //アルバムページの処理
     }else if(page.matches('#album-page')){
        page.querySelector('#home-button').onclick = function() {
         document.querySelector('#navigator').popPage();
       };
     //カロリータンパク質ページの処理
     }else if(page.matches('#nutrition-page')){
        page.querySelector('#home-button').onclick = function() {
         document.querySelector('#navigator').popPage();
       };
     //プロフィールページの処理
     }else if(page.matches('#profile-page')){
        page.querySelector('#home-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="common.html"></ons-navigator>
 <!-- 共通画面 -->
 <ons-template id="common.html">
   <ons-page id="common-page">
     <ons-tabbar>
       <ons-tab page="home.html" icon="md-home"></ons-tab>
       <ons-tab page="schedule.html" icon="fa-calendar"></ons-tab>
     </ons-tabbar>
   </ons-page>
 </ons-template>
 <!--ホーム画面-->
 <ons-template id="home.html">
   <ons-page id="home-page">
     <ons-toolbar>
       <div class="center">ホーム</div>
     </ons-toolbar>
     <div class="content" style="text-align: center">
       <p>
         <ons-button id="schedule-button">スケジュール</ons-button>
         <ons-button id="goal-button">目標管理</ons-button>
       </p>
       <p>
         <ons-button id="weight-button">ボディ<br>チェック</ons-button>
         <ons-button id="album-button">アルバム</ons-button>
       </p>
       <p>
         <ons-button id="nutrition-button">カロリー<br>タンパク質</ons-button>
         <ons-button id="profile-button">プロフィール</ons-button>
       </p>
     </div>
     
   </ons-page>
 </ons-template>
 <!--スケジュール画面-->
 <ons-template id="schedule.html">
   <ons-page id="schedule-page">
     <ons-toolbar>
       <div class="left"><ons-back-button>home</ons-back-button></div>
       <div class="center">スケジュール</div>
     </ons-toolbar>
     <div class="content" style="text-align: center">
       <ons-button id="home-button">ホーム</ons-button>
     </div>
   </ons-page>
 </ons-template>
 <!---目標画面-->
 <ons-template id="goal.html">
   <ons-page id="goal-page">
     <ons-toolbar>
       <div class="left"><ons-back-button>home</ons-back-button></div>
       <div class="center">目標</div>
     </ons-toolbar>
     <div class="content" style="text-align: center">
       <ons-button id="home-button">ホーム</ons-button>
     </div>
   </ons-page>
 </ons-template>
 <!---ボディチェック画面-->
 <ons-template id="weight.html">
   <ons-page id="weight-page">
     <ons-toolbar>
       <div class="left"><ons-back-button>home</ons-back-button></div>
       <div class="center">ボディチェック</div>
     </ons-toolbar>
     <div class="content" style="text-align: center">
       <ons-button id="home-button">ホーム</ons-button>
     </div>
   </ons-page>
 </ons-template>
 <!---アルバム画面-->
 <ons-template id="album.html">
   <ons-page id="album-page">
     <ons-toolbar>
       <div class="left"><ons-back-button>home</ons-back-button></div>
       <div class="center">アルバム</div>
     </ons-toolbar>
     <div class="content" style="text-align: center">
       <ons-button id="home-button">ホーム</ons-button>
     </div>
   </ons-page>
 </ons-template>
 <!---カロリータンパク質画面-->
 <ons-template id="nutrition.html">
   <ons-page id="nutrition-page">
     <ons-toolbar>
       <div class="left"><ons-back-button>home</ons-back-button></div>
       <div class="center">カロリータンパク質</div>
     </ons-toolbar>
     <div class="content" style="text-align: center">
       <ons-button id="home-button">ホーム</ons-button>
     </div>
   </ons-page>
 </ons-template>
 <!---プロフィール画面-->
 <ons-template id="profile.html">
   <ons-page id="profile-page">
     <ons-toolbar>
       <div class="left"><ons-back-button>home</ons-back-button></div>
       <div class="center">プロフィール</div>
     </ons-toolbar>
     <div class="content" style="text-align: center">
       <ons-button id="home-button">ホーム</ons-button>
     </div>
   </ons-page>
 </ons-template>
</body>
</html>
```
### 試したこと
### 補足情報(FW/ツールのバージョンなど)
  • JavaScript

    30902 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    19449 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Monaca

    1440 questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る