回答編集履歴

1

ons-pageのshowでやれば取れるのがわかったので修正しました

2019/02/26 10:54

投稿

rururu3
rururu3

スコア5545

test CHANGED
@@ -1,10 +1,6 @@
1
- ブラウザがどれかわからないので再現確認はできなかったです、予想と
1
+ ons-pageshowイベントやれば取れるのがわかりまた。
2
2
 
3
- `console.log(document.getElementById("pushswitch").checked);`
3
+ (ons.readyやwindow.onloadでは私が調べた限り無理なようです)
4
-
5
- に関して
6
-
7
- `<ons-switch id="pushswitch" checked></ons-switch>`の前にやってしまってるのではないかと思います(宣言順の問題)
8
4
 
9
5
 
10
6
 
@@ -12,7 +8,7 @@
12
8
 
13
9
  <!DOCTYPE html>
14
10
 
15
- <html lang="en">
11
+ <html>
16
12
 
17
13
  <head>
18
14
 
@@ -20,57 +16,7 @@
20
16
 
21
17
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
22
18
 
23
- <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
19
+ <script src="https://unpkg.com/onsenui/js/onsenui.js"></script>
24
-
25
- <meta charset="UTF-8">
26
-
27
- <title>OnsenUI</title>
28
-
29
- </head>
30
-
31
- <body>
32
-
33
- <ons-switch id="pushswitch" checked></ons-switch>
34
-
35
- <script>
36
-
37
- document.getElementById('pushswitch').addEventListener('change', function(e) {
38
-
39
- console.log(document.getElementById("pushswitch").checked);
40
-
41
- if(document.getElementById("pushswitch").checked) {
42
-
43
- }
44
-
45
- else{
46
-
47
- }
48
-
49
- });
50
-
51
- </script>
52
-
53
- </body>
54
-
55
- </html>
56
-
57
- ```
58
-
59
- は動くけど
60
-
61
- ```html
62
-
63
- <!DOCTYPE html>
64
-
65
- <html lang="en">
66
-
67
- <head>
68
-
69
- <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
70
-
71
- <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
72
-
73
- <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
74
20
 
75
21
  <meta charset="UTF-8">
76
22
 
@@ -78,19 +24,33 @@
78
24
 
79
25
  <script>
80
26
 
81
- document.getElementById('pushswitch').addEventListener('change', function(e) {
27
+ ons.ready(function() {
82
28
 
83
- console.log(document.getElementById("pushswitch").checked);
29
+ document.getElementById('pushswitch').addEventListener('change', function(e) {
84
30
 
85
- if(document.getElementById("pushswitch").checked) {
31
+ console.log(document.getElementById('pushswitch').checked);
86
32
 
87
- }
33
+ if(document.getElementById("pushswitch").checked) {
88
34
 
89
- else{
35
+ }
90
36
 
91
- }
37
+ else{
92
38
 
39
+ }
40
+
93
- });
41
+ });
42
+
43
+ document.addEventListener('show', function(event) {
44
+
45
+ if (event.target.matches('#main')) {
46
+
47
+ console.log(document.getElementById('pushswitch').checked);
48
+
49
+ }
50
+
51
+ });
52
+
53
+ });
94
54
 
95
55
  </script>
96
56
 
@@ -98,26 +58,14 @@
98
58
 
99
59
  <body>
100
60
 
61
+ <ons-page id="main">
62
+
101
- <ons-switch id="pushswitch" checked></ons-switch>
63
+ <ons-switch id="pushswitch" checked></ons-switch>
64
+
65
+ </ons-page>
102
66
 
103
67
  </body>
104
68
 
105
69
  </html>
106
70
 
107
71
  ```
108
-
109
- これは上記の理由で動きません。
110
-
111
- (onloadイベントやら、jQueryなら
112
-
113
- ```JavaScript
114
-
115
- $(function(){
116
-
117
- alert('Hello');
118
-
119
- });
120
-
121
- ```
122
-
123
- あたりで書くと大丈夫です