MonacaのOnsen-UIを利用して足し算アプリをつくっています

MonacaのOnsen-UIを利用して足し算アプリをつくっています
開始ページにボタンを設置して、それを押すと足し算の問題が表示されるページに移行する動作をさせたいのですが、
問題が表示されずに困っています
どうやら、pushPage()関数と、$().text()関数の実行タイミングに問題があるのではないかとも思うのですが、解決方法がわからず、質問させていただきました
ソースの一部を載せます
HTMLはこちらです

<script>
  ons.bootstrap();
  ons.disableAutoStatusBarFill();  // (Monaca enables StatusBar plugin by default)
</script>

<ons-navigator var="mentalcal" page="home.html"></ons-navigator>
<ons-template id="home.html">           <!--ここがさいしょのページです-->
<ons-page>
<button id="startbtn">はじめ</button>
</ons-page>
</ons-template>

<ons-template id="formula.html">  <!--二ページ目です-->
<ons-page>
<div id="formula"></div>  <!--ここに問題文が表示されます-->
 <!--省略してます-->
</ons-page>
  </ons-template>

JAVASCRIPTのソースはこちらです

$(function(){
    var fom;      //これは問題を入れる二重配列です
    var f;       
    var total=2;
    function dispfom(num){             //問題を表示する関数です
      $("#formula").text(fom[num][0]+"+"+fom[num][1]+"=");
  }
  function initgame(){     //変数の初期化と、問題を作成して表示する関数です
      fom=[];
      f=0;
     
  for(v=0;v<total;v++){       //問題を作成してます（二桁までの足し算）
      var cal=[];
      for(i=0;i<2;i++){                   
       cal.push(Math.floor(Math.random()*100));
      }
      fom.push(cal);
  }
  dispfom(f);             //ここで問題を表示します
    }
    $("body").on("click","#startbtn",function(){ //ページ移行と初期化をしてます
      mentalcal.pushPage("formula.html");
      initgame();            
        });

はじめボタンをおすとページ移行はするのですが問題は表示されず、その後別のタイミングで$().text()関数を実行するとちゃんと表示されるという動作です
ご指導のほうよろしくおねがいします

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

回答1件

ベストアンサー

https://ja.onsen.io/v2/docs/js/ons-navigator.html
にサンプルがあるようにinitイベントで変更するのが適切なタイミングのようですので、

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.2.6/css/onsenui.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.2.6/css/onsen-css-components.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.2.6/js/onsenui.js"></script>
	<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</head>

<body>
	<ons-navigator id="mentalcal" page="home.html"></ons-navigator>
		<ons-template id="home.html">           <!--ここがさいしょのページです-->
			<ons-page>
				<button id="startbtn">はじめ</button>
			</ons-page>
		</ons-template>

		<ons-template id="formula.html">  <!--二ページ目です-->
			<ons-page id="formula">
				<div id="formula_div"></div>  <!--ここに問題文が表示されます-->
				<!--省略してます-->
			</ons-page>
		</ons-template>
	</ons-navigator>
</body>

<script>
var fom;      //これは問題を入れる二重配列です
var f;       
var total=2;
var mentalcal = document.querySelector("#mentalcal");
$(function(){
	function initgame(){     //変数の初期化と、問題を作成して表示する関数です
		fom=[];
		f=0;

		for(v=0;v<total;v++){       //問題を作成してます（二桁までの足し算）
			var cal=[];
			for(i=0;i<2;i++){                   
				cal.push(Math.floor(Math.random()*100));
			}
			fom.push(cal);
		}
	}
	$("body").on("click","#startbtn",function(){ //ページ移行と初期化をしてます
		initgame();
		mentalcal.pushPage("formula.html");
	});
});

document.addEventListener('init', function(event) {
	var page = event.target;
	if (page.id === 'formula') {
		var formula = $("#formula_div");
		formula.text(fom[f][0]+"+"+fom[f][1]+"=");
	}
});
</script>

</html>

こんな感じになりますかね。

formula.html内のidの付け方およびdocument.addEventListenerがポイントです。

投稿2017/05/15 09:57