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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Android

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

Onsen UI

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

Monaca

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

Q&A

解決済

1回答

448閲覧

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

fuji0130

総合スコア7

Android

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

Onsen UI

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

Monaca

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

0グッド

0クリップ

投稿2018/06/03 00:49

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

該当のソースコード

javascript

1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <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'"> 7 <script src="components/loader.js"></script> 8 <script src="lib/onsenui/js/onsenui.min.js"></script> 9 10 <link rel="stylesheet" href="components/loader.css"> 11 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 12 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 13 <link rel="stylesheet" href="css/style.css"> 14 15 16 <script> 17 function changed() { 18 var range = (mySwitch.isChecked() ? 'ON' : 'OFF'); 19 ons.notification.alert('LED switch is ' + range.value); 20 switch_toggled(range); 21} 22 function switch_toggled(range){ 23 return range.value; 24 } 25 </script> 26 27 <script> 28//ここからはデバッグ用の関数部分 変数の中身を確認するための関数 29 30ons.bootstrap(); 31ons.ready(function(){ 32 33 34 var log = function(message){ 35 if (typeof message == "object") message = JSON.stringify(message); 36 $("#log").append(message + "<br />"); 37 }; 38 39 40 41 <!--送信前に送信データをArrayBufferに変換する部分??--> 42 function stringToBytes(string) { 43 <!--string.lengthは1??--> 44 var array = new Uint8Array(string.length); 45 for (var i = 0, l = string.length; i < l; i++) { 46 array[i] = string.charCodeAt(i); 47 } 48 return array.buffer; 49 } 50 51var app ={ 52 53//RGBのデータを追加、データとデータの間にカンマをいれて、一つの文字列に連結する関数 54getColor: function () { 55 var color = []; 56 //push()メソッドは配列の最後に1つ以上の要素を追加し、新しい配列のlengthを返す。 57 var range = switch_toggled(); 58 color.push(range); 59 color.push(document.getElementById('R_range').value); 60 color.push(document.getElementById('G_range').value); 61 color.push(document.getElementById('B_range').value) 62 //joinメソッドは配列の各要素を指定の文字列で連結し、結果の文字列を返す。 63 return color.join(','); 64 }, 65 66//getColorからデータ取ってきて、画面に表示してからデータをsendArduinoに渡す 67onColorChange: function (evt) { 68 //getColor()で設定された 変数 Color配列の中身をcに代入する。 69 var c = app.getColor(); 70 //rgbaTextはHTMLで使ってるidで、そこにcの中身を表示させる?(.innerText) 71 rgbText.innerText = c; 72 previewColor.style.backgroundColor = "rgb(" + c + ")"; 73 //sendToArduinoにcを渡す 74 app.sendToArduino(c); 75 76}, 77//Arduinoに文字列データを送る 78sendToArduino: function(c) { 79 80 var DATA = ("c" + c + "\n"); 81 var sendDATA = stringToBytes(DATA); 82 83 ble.write(device.id,"D8FB2E3A-E180-49E5-98EC-0596B05F5DF2","F8C75AF6-4AAA-11E8-842F-0ED5F89F718B",sendDATA.buffer); 84 85 } 86 87}; 88 89 90 91 92 setInterval(function(){ 93 ble.scan([],5, function(device){ 94 if (device.name === "RN363A") { 95 ble.connect(device.id,function(device){ 96 $("#led2on").change(function(){ 97 98 //値を取得して送信用のデータに変換して、Arduinoに送る。 99 app.onColorChange; 100 101 }); 102 103 }); 104 } 105 }); 106 },3000); 107 }); 108 </script> 109</head> 110<body> 111<!-- この部分は変数の中身確認用の出力エリア--> 112 <br /> 113<ons-page > 114 <ons-toolbar> 115 <div class="center">Data binding</div> 116 </ons-toolbar> 117 118 <ons-list> 119 <ons-list-item> 120 <div class="left"> 121 LED is 122 </div> 123 {{ data.switch ? 'ON' : 'OFF' }} 124 </div> 125 <p id="info"><p/> 126 127 <div class = "right"> 128 <!--onchange はjavascriptの表現--> 129 <ons-switch id ="led_switch" var="mySwitch" onchange="changed()" ng-model ="data.switch" > 130 </ons-switch> 131 </div> 132 133 </ons-list-item> 134 <ons-list-item> 135 <!-- 左側のアイコン表示 --> 136 <ons-col width="40px" style="text-align: center; line-height: 31px;"> 137 R 138 </ons-col> 139 <!-- スライダー部分 --> 140 <ons-col> 141 <ons-range ng-model="R_data.range" style="width: 100%;" value="25" id="R_range"> 142 </ons-range> 143 </ons-col> 144 <!-- 右側のアイコン部分 --> 145 <ons-col width="40px" style="text-align: center; line-height: 31px;"> 146 {{ R_data.range }} 147 </ons-col> 148 </ons-list-item> 149 <ons-list-item> 150 <!-- 左側のアイコン表示 --> 151 <ons-col width="40px" style="text-align: center; line-height: 31px;"> 152 G 153 </ons-col> 154 <!-- スライダー部分 --> 155 <ons-col> 156 <ons-range ng-model="G_data.range" style="width: 100%;" value="25" id="G_range"> 157 </ons-range> 158 </ons-col> 159 <!-- 右側のアイコン部分 --> 160 <ons-col width="40px" style="text-align: center; line-height: 31px;"> 161 {{ G_data.range }} 162 </ons-col> 163 </ons-list-item> 164 <ons-list-item> 165 <!-- 左側のアイコン表示 --> 166 <ons-col width="40px" style="text-align: center; line-height: 31px;"> 167 B 168 </ons-col> 169 <!-- スライダー部分 --> 170 <ons-col> 171 <ons-range ng-model="B_data.range" style="width: 100%;" value="25" id="G_range"> 172 </ons-range> 173 </ons-col> 174 <!-- 右側のアイコン部分 --> 175 <ons-col width="40px" style="text-align: center; line-height: 31px;"> 176 {{ B_data.range }} 177 </ons-col> 178 </ons-list-item> 179 180 181 182 <ons-list-header>Text input</ons-list-header> 183 <ons-list-item> 184 <ons-if platform="ios" class="left"> 185 Name 186 </ons-if> 187 <div class="center"> 188 <ons-input placeholder="Input name" float ng-model="data.name"></ons-input> 189 </div> 190 </ons-list-item> 191 <ons-list-item> 192 Hello there, {{ data.name }}! 193 </ons-list-item> 194 195 </ons-list> 196</ons-page> 197</body> 198</html> 199

試したこと

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

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);
}

投稿2018/06/13 13:15

fuji0130

総合スコア7

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問