ncmbのデータストアに保存できない

Question

monaca初心者です。
monacaでアプリ開発を行っています。OnsenUIと"二フクラmobilebackend"（以下※ncmbとする）を使いシングルページアプリの単語アプリを作成しようと考えています。
その過程でどうしてもできない部分があるので、どなたかご教授いただければ幸いです。(__)
#前提:
単語 問・解(二つセット）をncmbのデータストアにクラスを作成し、そこに保存しようと考えています。
※画面上にテキストボックスが二つあり、単語とその回答（二つ）を入力→完了ボタンを押し単語を保存
というようなイメージです。

アプリの構成は、index.html(<script>にons.bootstrap()などを読み込んでいます。)　
page1.html(単語の追加フォーム) page2.html（追加に成功した場合のフォーム）mb.js（ncmbの設定変更）
になっています。

---

page1(単語追加Form)の保存ボタンにはonClicked()イベントを書き込み、
index(本体)内の<script>部分にあるonCickedを読み込みます。
下記がindex内のonclick()の関数です。

function onClicked(){
var mondai = document.getElementById('input_mondai').value.length;//テキストボックスの文字列を取得
            var kaitou = document.getElementById('input_kaitou').value.length;////テキストボックスの文字列を取得
            if(mondai === 0 ||kaitou === 0){}/*キャンセルalert()を後追加*/
else{
            myNavigator.pushPage('page2.html');//両方のテキストボックスに文字列が記入されていればpushpage
            abcd(mondai,kaitou);//mb.js内にある関数を呼び出す。
        }
     }

下記がmb.js内の関数です。

 // APIキーの設定とSDK初期化 mBaaS設定
    
  var ncmb = new NCMB("key","key"); /
     
//ncmbのデータストアに保存する
       function abcd(mondai,kaitou){
            var GameScore = ncmb.DataStore("Vocablary");
            var gameScore = new GameScore();
            gameScore.set(mondai, kaitou)  //単語入力 値を送る
            .save()                           //save
            .catch(function(err){
                // 保存に失敗した場合の処理
            });
            }

###試したこと
mb.js内の関数をonClicked()関数内に追加すれば実行できるのではないだろうか...→できない
など、
知識が少ないせいか、ただただtry＆errorを繰り返すばかりで一向に解決する気配がありません。
以上になります。

なにか不明な点等がありましたら、情報をすぐ記しますの、何卒、よろしくお願いいたします。

Answer 1

変数の mondai がundefinedのようです（変数が設定されていない or きちんと値が取れていない）。その辺りをHTMLとJavaScriptを見直してください。

Comments

[taka.san]

monngift様、回答ありがとうございました。本当に助かりました。
結局、変数を見直し、再度実行してみても動きませんでした。
勉強不足故、解決できないのかもしれないので、もう少し勉強したうえで、
この問題を解消できるか再度考えてみます。
ありがとうございました。

Answer 2

幾つか改善できるポイントがあるかなと。

var mondai = document.getElementById('input_mondai').value.length;//テキストボックスの文字列を取得
var kaitou = document.getElementById('input_kaitou').value.length;

.legnthは文字列ではなく、文字数を取る関数なので、この場合は不向きです。 var kaitou = document.getElementById('input_kaitou').value でいいかと。

その上で判定としては、

if(mondai.trim() !== '' || kaitou.trim() !== ''){
  alert('エラーメッセージ');
  return;
}

とするのがいいかと思います（trim()は空白文字を取り除く関数です）。

---

以下の呼び出し順番が気になります。逆の方がよさそうです。

abcd(mondai,kaitou);
myNavigator.pushPage('page2.html');//両方のテキストボックスに文字列が記入されていればpushpage

その上で、 abcd はネットワークの非同期処理を行っているので、処理完了を待ってから pushPageを実行する方がいいかと思います。

そのためには関数で、まず保存処理を返却します（setの使い方が違ったので修正してあります）。

function abcd(mondai,kaitou){
  var Vocablary = ncmb.DataStore("Vocablary");
  var vocablary = new Vocablary();
  return vocablary
           .set('mondai', mondai)
           .set('kaitou', kaitou)    //単語入力 値を送る
           .save();                  //save
}

そして、呼び出し側を次のように変えます。

abcd(mondai,kaitou)
  // save処理を受け取っているので、then/catchで処理を継続する
  .then(function(res) {
    myNavigator.pushPage('page2.html');  // 保存処理が成功すればpushpage
  })
  .catch(function(err) {
    // エラー処理
  });

何となくですが、 gameScore.set(mondai, kaitou) で、問題文（mondai、つまり日本語）がカラム名に指定されてエラーになっていたのではないでしょうか。

Comments

[taka.san]

moongift様、回答いただき本当にありがとうございます。

回答者様の仰る通り、問題文がカラム名に指定されてエラーになっていたようです。
助言の通りにプログラムを走らせたところ、データストアに保存する部分のプログラムは間違いなく動作しました。ありがとうございます。(__)
一つだけ、以下のようにエラーが発生してしまいました。
おそらく、if文の判定でtrim()が引っ掛かっているようなのですが、
////
TypeError:undefined is not an object(evaluationg 'mondai.trim')
//
何か解決策などあれば教えていただけますでしょうか。
よろしくお願いいたします。

Answer 3

しっかりとプログラムを見直したら、trimの部分も解消できました。
お騒がせして申し訳ありません...