teratail
回答率
85.48%
質問するログイン新規登録
トップJavaScriptに関する質問onsenUI switchのcheckedプロパティについて

編集履歴

回答編集履歴

6

追記

2019/02/27 03:52

投稿

oikashinoa
oikashinoa

スコア2826

test CHANGED
@@ -1,13 +1,15 @@
1
1
  [onsオブジェクト](https://ja.onsen.io/v2/guide/fundamentals.html#onsobujekuto)や[ready(callback)](https://ja.onsen.io/v2/api/js/ons.html#method-ready)を読んで下さい。
2
2
 
3
- `上記だけでは不十分な可能性が有ります。調査中`
4
-
5
-
6
-
7
3
  - 簡単に言うとons.ready()が呼ばれるとCordovaやUnsenUI関係の命令が使えるように準備が終わった状態になります。
8
4
 
9
5
 
10
6
 
7
+ [ページのライフサイクル - Onsen UI](https://ja.onsen.io/v2/guide/lifecycle.html)も見て下さい。
8
+
9
+ - 各ページの準備(init)ができてないと、CSSコンポーネント（Switchとか）の参照に失敗するようです。
10
+
11
+
12
+
11
13
  OnsenUI V2 JS Splitter ベースにSwitch関係を追記。
12
14
 
13
15
  **Monaca のIDEでOnsenUI V2 JS Splitterをインポート後、index.htmlをこれで上が書いてみて下さい。**
@@ -52,12 +54,10 @@
52
54
 
53
55
  console.log(`ons.isReady() is ${ons.isReady()} は念の為確認`);
54
56
 
55
- // ↓のコメントを外すとchangeイベントが呼び出されない？
57
+ // 正しくは別記codepenでの記載のようにinit()内で記載しないとタイミングによってはエラーとなる。
56
58
 
57
59
  // console.log(document.getElementById('pushswitch').checked);
58
60
 
59
- // ⇡のコメントを外すとchangeイベントが呼び出されない？
60
-
61
61
  document.getElementById('pushswitch').addEventListener('change', function (e) {
62
62
 
63
63
  console.log(document.getElementById('pushswitch').checked);
@@ -252,7 +252,7 @@
252
252
 
253
253
 
254
254
 
255
- codepenでのテストコードも追加
255
+ codepenでのテストコードも追加。たぶんこれでOK
256
256
 
257
257
  ```html
258
258
 
@@ -282,11 +282,11 @@
282
282
 
283
283
  console.log(`ons.isReady() is ${ons.isReady()} は念の為確認`);
284
284
 
285
- // ↓のコメントを外すとchangeイベントの登録が呼び出されない？
285
+ // 各ページの初期化が終わってない段階で[checked]は参照できないのでエラーになる。
286
-
286
+
287
- console.log(document.getElementById('pushswitch').checked);
287
+ // console.log(document.getElementById('pushswitch').checked);
288
-
289
- // ⇡のコメントを外すとchangeイベントの登録が呼び出されない？
288
+
289
+
290
290
 
291
291
  document.getElementById('pushswitch').addEventListener('change', function (e) {
292
292
 
@@ -294,7 +294,21 @@
294
294
 
295
295
  });
296
296
 
297
+ console.log("addEventListener end");
298
+
299
+ // 各ページの初期化が終わってから値を参照すること。
300
+
301
+ document.addEventListener('init', function (event) {
302
+
303
+ if (event.target.matches('#main')) {
304
+
305
+ console.log('#main');
306
+
297
- console.log(document.getElementById('pushswitch').checked);
307
+ console.log(document.getElementById('pushswitch').checked);
308
+
309
+ }
310
+
311
+ }, false);
298
312
 
299
313
  });
300
314
 
@@ -314,8 +328,6 @@
314
328
 
315
329
  </body>
316
330
 
317
-
318
-
319
331
  </html>
320
332
 
321
333
  ```

5

追記

2019/02/27 03:52

投稿

oikashinoa
oikashinoa

スコア2826

test CHANGED
@@ -1,5 +1,9 @@
1
1
  [onsオブジェクト](https://ja.onsen.io/v2/guide/fundamentals.html#onsobujekuto)や[ready(callback)](https://ja.onsen.io/v2/api/js/ons.html#method-ready)を読んで下さい。
2
2
 
3
+ `上記だけでは不十分な可能性が有ります。調査中`
4
+
5
+
6
+
3
7
  - 簡単に言うとons.ready()が呼ばれるとCordovaやUnsenUI関係の命令が使えるように準備が終わった状態になります。
4
8
 
5
9
 

4

codepenでのテストコードも追加

2019/02/27 03:20

投稿

oikashinoa
oikashinoa

スコア2826

test CHANGED
@@ -245,3 +245,73 @@
245
245
 
246
246
 
247
247
  ```
248
+
249
+
250
+
251
+ codepenでのテストコードも追加
252
+
253
+ ```html
254
+
255
+ <!DOCTYPE html>
256
+
257
+ <html>
258
+
259
+
260
+
261
+ <head>
262
+
263
+ <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
264
+
265
+ <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
266
+
267
+ <script src="https://unpkg.com/onsenui/js/onsenui.js"></script>
268
+
269
+ <meta charset="UTF-8">
270
+
271
+ <title>OnsenUI</title>
272
+
273
+ <script>
274
+
275
+ ons.ready(function () {
276
+
277
+ console.log("start");
278
+
279
+ console.log(`ons.isReady() is ${ons.isReady()} は念の為確認`);
280
+
281
+ // ↓のコメントを外すとchangeイベントの登録が呼び出されない？
282
+
283
+ console.log(document.getElementById('pushswitch').checked);
284
+
285
+ // ⇡のコメントを外すとchangeイベントの登録が呼び出されない？
286
+
287
+ document.getElementById('pushswitch').addEventListener('change', function (e) {
288
+
289
+ console.log(document.getElementById('pushswitch').checked);
290
+
291
+ });
292
+
293
+ console.log(document.getElementById('pushswitch').checked);
294
+
295
+ });
296
+
297
+ </script>
298
+
299
+ </head>
300
+
301
+
302
+
303
+ <body>
304
+
305
+ <ons-page id="main">
306
+
307
+ <ons-switch id="pushswitch" checked></ons-switch>
308
+
309
+ </ons-page>
310
+
311
+ </body>
312
+
313
+
314
+
315
+ </html>
316
+
317
+ ```

3

ons.ready()に実験コードを追加

2019/02/27 02:41

投稿

oikashinoa
oikashinoa

スコア2826

test CHANGED
@@ -6,7 +6,9 @@
6
6
 
7
7
  OnsenUI V2 JS Splitter ベースにSwitch関係を追記。
8
8
 
9
- **Monaca のIDEでOnsenUI V2 JS Splitterをインポート後、index.htmlをこれでうわがいてみて下さい。**
9
+ **Monaca のIDEでOnsenUI V2 JS Splitterをインポート後、index.htmlをこれで上が書いてみて下さい。**
10
+
11
+ **ons.ready()に実験コードを追加**
10
12
 
11
13
  ``` HTML
12
14
 
@@ -40,38 +42,30 @@
40
42
 
41
43
  <script>
42
44
 
43
- ons.ready(function() {
45
+ ons.ready(function () {
44
-
46
+
45
- console.log("Onsen UI is ready!");
47
+ console.log("start");
48
+
46
-
49
+ console.log(`ons.isReady() is ${ons.isReady()} は念の為確認`);
50
+
51
+ // ↓のコメントを外すとchangeイベントが呼び出されない？
52
+
47
- console.log(document.getElementById("pushswitch").checked);
53
+ // console.log(document.getElementById('pushswitch').checked);
48
-
54
+
49
- console.log(document.getElementById("pushswitch2").checked);
55
+ // ⇡のコメントを外すとchangeイベントが呼び出されない？
50
-
51
-
52
-
56
+
53
- document.getElementById('pushswitch').addEventListener('change', function(e) {
57
+ document.getElementById('pushswitch').addEventListener('change', function (e) {
54
-
58
+
55
- if(document.getElementById("pushswitch").checked) {
59
+ console.log(document.getElementById('pushswitch').checked);
60
+
56
-
61
+ });
62
+
57
- console.log("checked!");
63
+ console.log(document.getElementById('pushswitch').checked);
58
-
59
- }else{
60
-
61
- console.log("nocheck");
62
-
63
- }
64
64
 
65
65
  });
66
66
 
67
67
 
68
68
 
69
-
70
-
71
- });
72
-
73
-
74
-
75
69
  window.fn = {};
76
70
 
77
71
  window.fn.open = function() {
@@ -248,4 +242,6 @@
248
242
 
249
243
 
250
244
 
245
+
246
+
251
247
  ```

2

追記

2019/02/27 02:38

投稿

oikashinoa
oikashinoa

スコア2826

test CHANGED
@@ -4,7 +4,9 @@
4
4
 
5
5
 
6
6
 
7
- OnsenUI V2 JS Splitter ベースにSwitch関係を追記
7
+ OnsenUI V2 JS Splitter ベースにSwitch関係を追記。
8
+
9
+ **Monaca のIDEでOnsenUI V2 JS Splitterをインポート後、index.htmlをこれでうわがいてみて下さい。**
8
10
 
9
11
  ``` HTML
10
12
 

1

追記

2019/02/27 01:51

投稿

oikashinoa
oikashinoa

スコア2826

test CHANGED
@@ -1,4 +1,4 @@
1
- [onsオブジェクト](https://ja.onsen.io/v2/guide/fundamentals.html#onsobujekuto)を読んで下さい。
1
+ [onsオブジェクト](https://ja.onsen.io/v2/guide/fundamentals.html#onsobujekuto)や[ready(callback)](https://ja.onsen.io/v2/api/js/ons.html#method-ready)を読んで下さい。
2
2
 
3
3
  - 簡単に言うとons.ready()が呼ばれるとCordovaやUnsenUI関係の命令が使えるように準備が終わった状態になります。
4
4