質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    16358questions

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

  • HTML

    8936questions

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

  • Onsen UI

    320questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

再読込時のvalue値初期化について

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 208

satosatope

score 3

以下のようなHTMLとJavaScriptを用いてアプリを開発しています。ページを4回再読込して表示させていますが、その際関数内でlogを表示させると前のページで選択された項目のvalue値も表示されてしまいます。

毎回、初期化された状態でvalue値を取得するにはどうすればよいのでしょうか。

よろしくお願いします。

<ons-template id="q1.html">
      <ons-page>
        <ons-toolbar>
          <div class="left">
            <ons-back-button>Back</ons-back-button>
          </div>
          <div class="center">Q1</div>
        </ons-toolbar>

        <ons-list>
            <ons-list-header>リスト</ons-list-header>
            <ons-list-item tappable>
              <label class="left">
                <ons-checkbox name="q11" value="q101"></ons-checkbox>
              </label>
              <label for="check-1" class="center">りんご</label>
            </ons-list-item>
            <ons-list-item tappable>
              <label class="left">
                <ons-checkbox name="q11" value="q102"></ons-checkbox>
              </label>
              <label for="check-2" class="center">ぶどう</label>
            </ons-list-item>
            <ons-list-item tappable>
              <label class="left">
                <ons-checkbox name="q11" value="q103"></ons-checkbox>
              </label>
              <label for="check-3" class="center">みかん</label>
            </ons-list-item>
            <ons-list-item tappable>
              <label class="left">
                <ons-checkbox name="q11" value="q104"></ons-checkbox>
              </label>
              <label for="check-4" class="center">なし</label>
            </ons-list-item>
            <ons-list-item tappable>
              <label class="left">
                <ons-checkbox name="q11" value="q105"></ons-checkbox>
              </label>
              <label for="check-5" class="center">いちご</label>
            </ons-list-item>
            <ons-list-item tappable>
              <label class="left">
                <ons-checkbox name="q11" value="q106"></ons-checkbox>
              </label>
              <label for="check-6" class="center">かき</label>
            </ons-list-item>
        </ons-list>

        <div style="text-align: center">
          <br />
          <ons-button modifier="light" onclick="checkq1()">
            次へ
          </ons-button>
        </div>
      </ons-page>
    </ons-template>
function checkq1() {
        console.log("in checkq1.");

        var ans = 0;

        var checkboxq1 = document.getElementsByName('q11');
        for(var i = 0; i < checkboxq1.length; i++){
            if(checkboxq1[i].checked){
                console.log("value: " + checkboxq1[i].value);
                ans++;
            }
        };
        ans = ans/2;
        console.log(ans);

        if (count < 4) {
            myNavigator.pushPage('q1.html', { animation : 'slide' } );
        } else {
            countReset();
            myNavigator.pushPage('q2.html', { animation : 'slide' } );
        };
    };
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

OnsenUIをご利用ですね。
チェックボックスの値を確認する際のdocument.getElementsByName('q11');では、ドキュメント全体の[name="q11"]が対象となります。
myNavigator.pushPageは、q1.htmlの中身をテンプレートとした"要素"がドキュメントに追加されます。
その為、ページを追加する度にq1.htmlの中にある[name="q11"]の要素も増え、結果的に「前のページで選択された項目のvalue値」も出力されているのではないかと思います。

「毎回、初期化された状態でvalue値を取得する」方法は色々ありますが、ページを離れる際に処理をするのであれば

<ons-template id="q1.html">
  <!-- ons-pageのIDを"q1"に設定 -->
  <ons-page id="q1">
    ...省略
  </ons-page>
</ons-template>
// ページが追加された際に呼び出されるイベント
document.addEventListener('init', function(e) {
  // page = myNavigator.pushPage実行時に追加されたページ(要素)のDOM
  var page = e.target;

  // 追加されたページのIDが "q1" の時
  if (page.id === 'q1') {
    // ons-pageのイベントを利用
    // hideはページが隠れる時 = myNavigator.pushPage 実行時に発火
    // https://ja.onsen.io/v2/api/js/ons-page.html#event-hide
    page.addEventListener('hide', function() {

      var checkboxq1 = this.querySelectorAll('[name="q11"]');
      for(var i = 0; i < checkboxq1.length; i++){
        if(checkboxq1[i].checked){
          console.log("value: " + checkboxq1[i].value);
        }
      };

    }, false);
  }
}, false);

document.addEventListener('init')は、OnsenUIが読み込まれた後に一度実行すれば問題ないかと思います。
動作は確認していないので、スペルミスや処理に間違いがあるかもしれませんが参考になれば・・・!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/12 23:44

    ありがとうございました。解決しました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16358questions

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

  • HTML

    8936questions

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

  • Onsen UI

    320questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。