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

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

ただいまの
回答率

90.35%

  • Android

    6708questions

    Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

  • Monaca

    1010questions

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

  • Onsen UI

    333questions

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

Monacaで作るandroidアプリで ons-switch から ON/OFFの状態を取得したい

解決済

回答 1

投稿

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

fuji0130

score 1

 ons-switchで作ったスイッチの状態を取得したい

Monacaを使って、androidのアプリを作っています。
色々と自分なりに調べてみましたが、
onsenUIのリファレンスにも例文がなく、
メソッドの種類は書いてあるものの使い方までは書いておらず、
同じ問題に直面した先人様方の書かれていらっしゃる文章もよく読めず
もう何をどうすればいいのかわからなくなりましたので質問しようとなりました・・・。

 発生している問題・エラーメッセージ

onsenUI  ons-switchのメソッドである isCheckedを使って状態を取得しようとしていますが、下記のようなエラーメッセージが出ます。
このページに書かれていたのを見て書きました
https://ja.onsen.io/v1/guide.html

※コード部分抜粋
<script>
function changed() {
alert(mySwitch.isChecked() ? 'ON' : 'OFF');
}
</script>
<ons-switch var="mySwitch" onchange="changed()"></ons-switch>

エラーメッセージ

Uncaught TypeError: mySwitch.isChecked is not a function

 該当のソースコード

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: 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>      
      function changed() {
      var range = (mySwitch.isChecked() ? 'ON' : 'OFF');
      ons.notification.alert('LED switch is ' + range.value);
      switch_toggled(range);
}
      function switch_toggled(range){
          return range.value;
      }
      </script>

    <script>
//ここからはデバッグ用の関数部分 変数の中身を確認するための関数

ons.bootstrap();
ons.ready(function(){


    var log = function(message){
        if (typeof message == "object") message = JSON.stringify(message);
        $("#log").append(message + "<br />");
    };



                    <!--送信前に送信データをArrayBufferに変換する部分??-->
                    function stringToBytes(string) {
                        <!--string.lengthは1??-->
                       var array = new Uint8Array(string.length);
                       for (var i = 0, l = string.length; i < l; i++) {
                           array[i] = string.charCodeAt(i);
                       }
                       return array.buffer;
                      }

var app ={

//RGBのデータを追加、データとデータの間にカンマをいれて、一つの文字列に連結する関数
getColor: function () {
        var color = [];
        //push()メソッドは配列の最後に1つ以上の要素を追加し、新しい配列のlengthを返す。
        var range = switch_toggled();
        color.push(range);
        color.push(document.getElementById('R_range').value);
        color.push(document.getElementById('G_range').value);
        color.push(document.getElementById('B_range').value)
        //joinメソッドは配列の各要素を指定の文字列で連結し、結果の文字列を返す。
        return color.join(',');
    },

//getColorからデータ取ってきて、画面に表示してからデータをsendArduinoに渡す
onColorChange: function (evt) {
        //getColor()で設定された 変数 Color配列の中身をcに代入する。
        var c = app.getColor();
        //rgbaTextはHTMLで使ってるidで、そこにcの中身を表示させる?(.innerText)
                rgbText.innerText = c;
                   previewColor.style.backgroundColor = "rgb(" + c + ")";
                              //sendToArduinoにcを渡す
                              app.sendToArduino(c);

},
//Arduinoに文字列データを送る
sendToArduino: function(c) {

        var DATA = ("c" + c + "\n");
        var sendDATA = stringToBytes(DATA);

         ble.write(device.id,"D8FB2E3A-E180-49E5-98EC-0596B05F5DF2","F8C75AF6-4AAA-11E8-842F-0ED5F89F718B",sendDATA.buffer);

  }

};




    setInterval(function(){
        ble.scan([],5, function(device){
            if (device.name === "RN363A") {
                ble.connect(device.id,function(device){
                   $("#led2on").change(function(){

                    //値を取得して送信用のデータに変換して、Arduinoに送る。
                    app.onColorChange;

                    });

            });
           }
        });
    },3000); 
  });
    </script>
</head>
<body>
<!--  この部分は変数の中身確認用の出力エリア-->
    <br />
<ons-page >
  <ons-toolbar>
    <div class="center">Data binding</div>
  </ons-toolbar>

  <ons-list>
        <ons-list-item>
      <div class="left">
        LED is
        </div>
         {{ data.switch ? 'ON' : 'OFF'  }}
      </div>
      <p id="info"><p/>

      <div class = "right">
        <!--onchange はjavascriptの表現-->
      <ons-switch id ="led_switch" var="mySwitch" onchange="changed()" ng-model ="data.switch" >
      </ons-switch>
    </div>

    </ons-list-item>  
    <ons-list-item>
           <!-- 左側のアイコン表示 -->
          <ons-col width="40px" style="text-align: center; line-height: 31px;">
             R
            </ons-col>
             <!-- スライダー部分 -->
              <ons-col>
                 <ons-range ng-model="R_data.range" style="width: 100%;" value="25" id="R_range">
                </ons-range>
              </ons-col> 
              <!-- 右側のアイコン部分 -->
                     <ons-col width="40px" style="text-align: center; line-height: 31px;">
                     {{ R_data.range }}
                     </ons-col>               
         </ons-list-item>
    <ons-list-item>
           <!-- 左側のアイコン表示 -->
          <ons-col width="40px" style="text-align: center; line-height: 31px;">
            G
          </ons-col>
             <!-- スライダー部分 -->
              <ons-col>
                 <ons-range ng-model="G_data.range" style="width: 100%;" value="25" id="G_range">
                </ons-range>
              </ons-col> 
              <!-- 右側のアイコン部分 -->
                     <ons-col width="40px" style="text-align: center; line-height: 31px;">
                     {{ G_data.range }}
                     </ons-col>               
         </ons-list-item>
         <ons-list-item>
           <!-- 左側のアイコン表示 -->
          <ons-col width="40px" style="text-align: center; line-height: 31px;">
            B
          </ons-col>
             <!-- スライダー部分 -->
              <ons-col>
                 <ons-range ng-model="B_data.range" style="width: 100%;" value="25" id="G_range">
                </ons-range>
              </ons-col> 
              <!-- 右側のアイコン部分 -->
                     <ons-col width="40px" style="text-align: center; line-height: 31px;">
                     {{ B_data.range }}
                     </ons-col>               
         </ons-list-item>



    <ons-list-header>Text input</ons-list-header>
    <ons-list-item>
      <ons-if platform="ios" class="left">
        Name
      </ons-if>
      <div class="center">
        <ons-input placeholder="Input name" float ng-model="data.name"></ons-input>
      </div>
    </ons-list-item>
    <ons-list-item>
      Hello there, {{ data.name }}!
    </ons-list-item>

  </ons-list>
</ons-page>
</body>
</html>

 試したこと

申し訳ありません、昨日1日中ネットで調べては書き直し、調べては書き直しで
履歴を残していなかったのですが
onsenuiのmonacaバージョン+monacaバージョンじゃない方のコンポーネント追加してみたりしてみました
あと、今作ってるアプリのプロジェクトを確か最小限のテンプレートで作り始めたからなのか、フォルダ内にonsenuiのファイルとかが無いような気がするのですが
それも関係あったりするのでしょうか・・・?
別のプロジェクトをonsenuiのテンプレートで作って、コードをそのまま
コピペしたりしましたが、それでも同じエラーはでました。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

check解決した方法

0

解決しました
下記のように記述し、デバッガ上で動作を確認できました

スイッチ部分:
<ons-switch id ="led_switch" var="mySwitch"  ng-model ="data.switch" ></ons-switch>

スクリプト部分で、
$("#led_switch").change(function(){
ons.notification.alert('Value is ' + mySwitch.checked);
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • Android

    6708questions

    Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

  • Monaca

    1010questions

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

  • Onsen UI

    333questions

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