teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

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

2019/02/26 10:54

投稿

rururu3
rururu3

スコア5545

answer CHANGED
@@ -1,62 +1,36 @@
1
- ブラウザがどれかわからないので再現確認はできなかったです、予想と
1
+ ons-pageshowイベントやれば取れるのがわかりまた。
2
- `console.log(document.getElementById("pushswitch").checked);`
2
+ (ons.readyやwindow.onloadでは私が調べた限り無理なようです)
3
- に関して
4
- `<ons-switch id="pushswitch" checked></ons-switch>`の前にやってしまってるのではないかと思います(宣言順の問題)
5
3
 
6
4
  ```html
7
5
  <!DOCTYPE html>
8
- <html lang="en">
6
+ <html>
9
7
  <head>
10
8
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
11
9
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
12
- <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
10
+ <script src="https://unpkg.com/onsenui/js/onsenui.js"></script>
13
11
  <meta charset="UTF-8">
14
12
  <title>OnsenUI</title>
15
- </head>
16
- <body>
17
- <ons-switch id="pushswitch" checked></ons-switch>
18
13
  <script>
14
+ ons.ready(function() {
19
- document.getElementById('pushswitch').addEventListener('change', function(e) {
15
+ document.getElementById('pushswitch').addEventListener('change', function(e) {
20
- console.log(document.getElementById("pushswitch").checked);
16
+ console.log(document.getElementById('pushswitch').checked);
21
- if(document.getElementById("pushswitch").checked) {
17
+ if(document.getElementById("pushswitch").checked) {
22
- }
18
+ }
23
- else{
19
+ else{
24
- }
20
+ }
25
- });
21
+ });
22
+ document.addEventListener('show', function(event) {
23
+ if (event.target.matches('#main')) {
24
+ console.log(document.getElementById('pushswitch').checked);
25
+ }
26
+ });
27
+ });
26
28
  </script>
27
- </body>
28
- </html>
29
- ```
30
- は動くけど
31
- ```html
32
- <!DOCTYPE html>
33
- <html lang="en">
34
- <head>
35
- <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
36
- <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
37
- <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
38
- <meta charset="UTF-8">
39
- <title>OnsenUI</title>
40
- <script>
41
- document.getElementById('pushswitch').addEventListener('change', function(e) {
42
- console.log(document.getElementById("pushswitch").checked);
43
- if(document.getElementById("pushswitch").checked) {
44
- }
45
- else{
46
- }
47
- });
48
- </script>
49
29
  </head>
50
30
  <body>
31
+ <ons-page id="main">
51
- <ons-switch id="pushswitch" checked></ons-switch>
32
+ <ons-switch id="pushswitch" checked></ons-switch>
33
+ </ons-page>
52
34
  </body>
53
35
  </html>
54
- ```
36
+ ```
55
- これは上記の理由で動きません。
56
- (onloadイベントやら、jQueryなら
57
- ```JavaScript
58
- $(function(){
59
- alert('Hello');
60
- });
61
- ```
62
- あたりで書くと大丈夫です