MonacaのOnsen-UIを利用して足し算アプリをつくっています
解決済
回答 1
投稿
- 評価
- クリップ 0
- VIEW 709
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()関数を実行するとちゃんと表示されるという動作です
ご指導のほうよろしくおねがいします
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+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/07/01 14:03
<ons-page>が初期化されるタイミングはpageinitイベントで取得できるとのことで解決してました
丁寧な回答ありがとうございました