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のテンプレートで作って、コードをそのまま
コピペしたりしましたが、それでも同じエラーはでました。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。