onsenUI switchのcheckedプロパティについて

onsenUIのswitchを作っているのですが、うまく動作しません。

スイッチ部分がこちらで、

html
1<ons-switch id="pushswitch" checked></ons-switch>

それをcheckプロパティで判定するコードがこちらです。

javascript
1if (document.getElementById("pushswitch").checked) {
2   通知ON処理
3  }else{
4   通知OFF処理
5  }

getElementByIdメソッドをつかって、スイッチがONかOFFかを判定したいのですが、
判定がうまく行っていないようなので、確認のためconsole.logで表示したところ、

javascript
1console.log(document.getElementById("pushswitch").checked);
2

Type error: null is not an object (evalutating 'document.getElementById("pushswitch").checked')

とエラーが出てしまいます。

エラーの原因をご教授いただきたいです。
よろしくお願いいたします。

追記

回答いただきましたが、解決しませんでした、、、
javascriptをbodyタグの一番下に移したのですが更にもう一つのエラーが出てしまいました。

Type Error: null is not an object(evaluating 'this_input.checked')

unpkg.com/onsenui@2.10.6/js/onsenui.min.js:2 から起きているエラーのようですが、
よくわかりません、、、

もし原因がわかる方がいたらよろしくお願いいたします。

oikashinoa

2019/02/27 07:30

https://teratail.com/help#thanks-respondent にも書かれているように、コメントでお礼を記載しておきましょう。 - 無償で2,3時間調べてると思います。 - 私は”自分が調べたいことだけ”に調べて答えているんで問題ないんですが、他の人はどうなんでしょ？あまりに失礼が続くと次の質問が有った時、誰も助けてはもらえないですよ。 - 回答する前にその人が過去どんな質問したのか見てから答えてます。 - 変な人に回答すると後が大変なので、調べた後は自分のメモに残すだけにしてます。 monacaは好きで触っているのでお互いがんばりましょう

shunta71010

2019/02/27 08:37

アドバイスありがとうございます。参考にさせていただきます。

行動規範の内容に同意します

回答3件

onsオブジェクトやready(callback)を読んで下さい。

簡単に言うとons.ready()が呼ばれるとCordovaやUnsenUI関係の命令が使えるように準備が終わった状態になります。

ページのライフサイクル - Onsen UIも見て下さい。

各ページの準備(init)ができてないと、CSSコンポーネント（Switchとか）の参照に失敗するようです。

OnsenUI V2 JS Splitter ベースにSwitch関係を追記。
Monaca のIDEでOnsenUI V2 JS Splitterをインポート後、index.htmlをこれで上が書いてみて下さい。
ons.ready()に実験コードを追加

HTML
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: 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  <script>
16    ons.ready(function () {
17      console.log("start");
18      console.log(`ons.isReady() is ${ons.isReady()} は念の為確認`);
19      // 正しくは別記codepenでの記載のようにinit()内で記載しないとタイミングによってはエラーとなる。
20      // console.log(document.getElementById('pushswitch').checked);
21      document.getElementById('pushswitch').addEventListener('change', function (e) {
22        console.log(document.getElementById('pushswitch').checked);
23      });
24      console.log(document.getElementById('pushswitch').checked);
25    });
26
27    window.fn = {};
28    window.fn.open = function() {
29      var menu = document.getElementById('menu');
30      menu.open();
31    };
32    window.fn.load = function(page) {
33      var content = document.getElementById('content');
34      var menu = document.getElementById('menu');
35      content
36        .load(page)
37        .then(menu.close.bind(menu));
38    };
39
40  </script>
41</head>
42<body>
43  <ons-splitter>
44    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
45      <ons-page>
46        <ons-list>
47          <ons-list-item onclick="fn.load('home.html')" tappable>
48            Home
49          </ons-list-item>
50          <ons-list-item onclick="fn.load('settings.html')" tappable>
51            Settings
52          </ons-list-item>
53          <ons-list-item onclick="fn.load('about.html')" tappable>
54            About
55          </ons-list-item>
56        </ons-list>
57      </ons-page>
58    </ons-splitter-side>
59    <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
60  </ons-splitter>
61
62  <ons-template id="home.html">
63    <ons-page>
64      <ons-toolbar>
65        <div class="left">
66          <ons-toolbar-button onclick="fn.open()">
67            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
68          </ons-toolbar-button>
69        </div>
70        <div class="center">
71          Main
72        </div>
73      </ons-toolbar>
74      <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
75        Swipe right to open the menu!
76      </p>
77      <ons-switch id="pushswitch" checked></ons-switch>
78      <ons-switch id="pushswitch2" ></ons-switch>
79    </ons-page>
80  </ons-template>
81
82  <ons-template id="settings.html">
83  <ons-page>
84    <ons-toolbar>
85      <div class="left">
86        <ons-toolbar-button onclick="fn.open()">
87          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
88        </ons-toolbar-button>
89      </div>
90      <div class="center">
91        Settings
92      </div>
93    </ons-toolbar>
94  </ons-page>
95  </ons-template>
96
97  <ons-template id="about.html">
98  <ons-page>
99    <ons-toolbar>
100      <div class="left">
101        <ons-toolbar-button onclick="fn.open()">
102          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
103        </ons-toolbar-button>
104      </div>
105      <div class="center">
106        About
107      </div>
108    </ons-toolbar>
109  </ons-page>
110  </ons-template>
111
112</body>
113</html>
114
115

codepenでのテストコードも追加。たぶんこれでOK

html
1<!DOCTYPE html>
2<html>
3
4<head>
5  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
6  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
7  <script src="https://unpkg.com/onsenui/js/onsenui.js"></script>
8  <meta charset="UTF-8">
9  <title>OnsenUI</title>
10  <script>
11    ons.ready(function () {
12      console.log("start");
13      console.log(`ons.isReady() is ${ons.isReady()} は念の為確認`);
14      // 各ページの初期化が終わってない段階で[checked]は参照できないのでエラーになる。
15      // console.log(document.getElementById('pushswitch').checked);
16      
17      document.getElementById('pushswitch').addEventListener('change', function (e) {
18        console.log(document.getElementById('pushswitch').checked);
19      });
20      console.log("addEventListener end");
21      // 各ページの初期化が終わってから値を参照すること。
22      document.addEventListener('init', function (event) {
23        if (event.target.matches('#main')) {
24          console.log('#main');
25          console.log(document.getElementById('pushswitch').checked);
26        }
27      }, false);
28    });
29  </script>
30</head>
31
32<body>
33  <ons-page id="main">
34    <ons-switch id="pushswitch" checked></ons-switch>
35  </ons-page>
36</body>
37</html>

投稿2019/02/26 12:43

編集2019/02/27 03:52

oikashinoa

総合スコア2826

rururu3

2019/02/27 01:19

私も最初それで解決するだろうと思ったのですが、 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"> <script src="https://unpkg.com/onsenui/js/onsenui.js"></script> <meta charset="UTF-8"> <title>OnsenUI</title> <script> ons.ready(function() { console.log(document.getElementById('pushswitch').checked); }); </script> </head> <body> <ons-page id="main"> <ons-switch id="pushswitch" checked></ons-switch> </ons-page> </body> </html> でやってみたらわかるかと思いますが、エラーになります (monaca ideとかでやるとエラーでないのかもしれませんか、このソースのhtmlをブラウザで開くとエラーになります)

oikashinoa

2019/02/27 04:00 編集

私はMonacaIDEでテストしてconsole.logにて値が取れています。 - が、たまたまタイミングが良かっただけな気がしてます。 rururu3さんのコードを元にcodepenで試してました。 ons.ready() 内の console.log(document.getElementById('pushswitch').checked);` > Uncaught TypeError: Cannot read property 'checked' of null 上記を有効にするとエラーで落ちてました。 ons.ready()直後ではまだCSS component初期化中ってところなんですかね。 - 各ページ内の準備はまだ出来ていないと理解しました。以下の処理内でCSS componentの値を参照すれば良いようです。 document.addEventListener('init', function (event) { if (event.target.matches('#main')) {} } 本質問をKNaitoさんが見たようなので補足があれば期待です。

行動規範の内容に同意します

ベストアンサー

ons-pageのshowイベントでやれば取れるのがわかりました。
(ons.readyやwindow.onloadでは私が調べた限り無理なようです)

html
1<!DOCTYPE html>
2<html>
3<head>
4    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
5    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
6    <script src="https://unpkg.com/onsenui/js/onsenui.js"></script>
7    <meta charset="UTF-8">
8    <title>OnsenUI</title>
9<script>
10  ons.ready(function() {
11    document.getElementById('pushswitch').addEventListener('change', function(e) {
12      console.log(document.getElementById('pushswitch').checked);
13      if(document.getElementById("pushswitch").checked) {
14      }
15      else{
16      }
17    });
18    document.addEventListener('show', function(event) {
19      if (event.target.matches('#main')) {
20        console.log(document.getElementById('pushswitch').checked);
21      }
22    });
23  });
24</script>
25</head>
26<body>
27<ons-page id="main">
28  <ons-switch id="pushswitch" checked></ons-switch>
29</ons-page>
30</body>
31</html>

投稿2019/02/26 03:24

編集2019/02/26 10:54

rururu3

総合スコア5545

shunta71010

2019/02/26 08:03

解答ありがとうございました。追記に記載しましたが、解決できませんでした。

rururu3

2019/02/26 08:35

unpkg.com/onsenui@2.10.6/js/onsenui.min.js を指定してみましたが動きましたよ

rururu3

2019/02/26 08:38 編集

再現がとりあえずできないので、最小でこの現象が発生するHTMLを記載していただければ、私の方でも再現できて解決できるかもしれませんので、よろしくお願いいたします。

rururu3

2019/02/26 08:42

ons.readyでやるべきかもしれないので回答修正します

rururu3

2019/02/26 09:45

いろいろロード時イベントでやってみましたが、ons-switchの初期処理終わった時のイベント取れないようです。 jjj_aaaさんの記載されている通り、多少待つか、ロード直後に判定する必要がないのであれば私の回答の通り変更時にしたら良いと思います

shunta71010

2019/02/27 07:27

ベストアンサーにする解答を間違えてしまったのですが、こちらのコードを構造にしたところ、無事にスイッチが機能しました。ありがとうございました。

oikashinoa

2019/02/27 07:36

ベストアンサーは変更可能ですよ。

行動規範の内容に同意します

とりあえずで良ければ

javascript
1setTimeout(() => console.log(document.getElementById("pushswitch").checked), 10);

で解決すると思います。
onsenUIが非同期でUIコンポーネントを作成してるっぽいので、順番待ちすれば良いと思います。

実際は、イベントリスナーをきちんと実装して、状態変化を取得することになると思いますが。

投稿2019/02/26 09:08

退会済みユーザー

総合スコア0

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

onsenUI switchのcheckedプロパティについて

追記

関連した質問