\r\n \r\n OnsenUI\r\n\r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n```","dateModified":"2019-02-26T10:54:51.633Z","datePublished":"2019-02-26T03:24:18.879Z","upvoteCount":2,"url":"https://teratail.com/questions/176502#reply-262655"},"suggestedAnswer":[{"@type":"Answer","text":"[onsオブジェクト](https://ja.onsen.io/v2/guide/fundamentals.html#onsobujekuto)や[ready(callback)](https://ja.onsen.io/v2/api/js/ons.html#method-ready)を読んで下さい。\r\n- 簡単に言うとons.ready()が呼ばれるとCordovaやUnsenUI関係の命令が使えるように準備が終わった状態になります。\r\n\r\n[ページのライフサイクル - Onsen UI](https://ja.onsen.io/v2/guide/lifecycle.html)も見て下さい。\r\n- 各ページの準備(init)ができてないと、CSSコンポーネント（Switchとか）の参照に失敗するようです。\r\n\r\nOnsenUI V2 JS Splitter ベースにSwitch関係を追記。\r\n**Monaca のIDEでOnsenUI V2 JS Splitterをインポート後、index.htmlをこれで上が書いてみて下さい。**\r\n**ons.ready()に実験コードを追加**\r\n``` HTML\r\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n Home\r\n \r\n \r\n Settings\r\n \r\n \r\n About\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n Main\r\n
\r\n \r\n

\r\n Swipe right to open the menu!\r\n

\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n Settings\r\n
\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n About\r\n
\r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\r\n```\r\n\r\ncodepenでのテストコードも追加。たぶんこれでOK\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n OnsenUI\r\n \r\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n\r\n```","dateModified":"2019-02-27T03:52:18.896Z","datePublished":"2019-02-26T12:43:01.478Z","upvoteCount":2,"url":"https://teratail.com/questions/176502#reply-262804","comment":[{"@type":"Comment","text":"私も最初それで解決するだろうと思ったのですが、\r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n OnsenUI\r\n\r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n\r\nでやってみたらわかるかと思いますが、エラーになります\r\n(monaca ideとかでやるとエラーでないのかもしれませんか、このソースのhtmlをブラウザで開くとエラーになります)","datePublished":"2019-02-27T01:19:40.498Z","dateModified":"2019-02-27T01:19:40.498Z"},{"@type":"Comment","text":"私はMonacaIDEでテストしてconsole.logにて値が取れています。\r\n- が、たまたまタイミングが良かっただけな気がしてます。\r\n\r\nrururu3さんのコードを元にcodepenで試してました。\r\nons.ready() 内の\r\n console.log(document.getElementById('pushswitch').checked);`\r\n> Uncaught TypeError: Cannot read property 'checked' of null\r\n\r\n上記を有効にするとエラーで落ちてました。\r\nons.ready()直後ではまだCSS component初期化中ってところなんですかね。\r\n- 各ページ内の準備はまだ出来ていない と理解しました。\r\n\r\n以下の処理内でCSS componentの値を参照すれば良いようです。\r\ndocument.addEventListener('init', function (event) {\r\n if (event.target.matches('#main')) {}\r\n}\r\n\t\r\n本質問をKNaitoさんが見たようなので補足があれば期待です。","datePublished":"2019-02-27T03:07:09.433Z","dateModified":"2019-02-27T04:00:01.740Z"}]},{"@type":"Answer","text":"とりあえずで良ければ\r\n\r\n```javascript\r\nsetTimeout(() => console.log(document.getElementById(\"pushswitch\").checked), 10);\r\n```\r\n\r\nで解決すると思います。\r\nonsenUIが非同期でUIコンポーネントを作成してるっぽいので、順番待ちすれば良いと思います。\r\n\r\n実際は、[イベントリスナー](https://ja.onsen.io/v1/reference/ons-switch.html#method-on)をきちんと実装して、状態変化を取得することになると思いますが。","dateModified":"2019-02-26T09:08:07.597Z","datePublished":"2019-02-26T09:08:07.597Z","upvoteCount":1,"url":"https://teratail.com/questions/176502#reply-262765","comment":[]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://teratail.com","name":"トップ"}},{"@type":"ListItem","position":2,"item":{"@id":"https://teratail.com/tags/JavaScript","name":"JavaScriptに関する質問"}},{"@type":"ListItem","position":3,"item":{"@id":"https://teratail.com/questions/176502","name":"onsenUI switchのcheckedプロパティについて"}}]}}}
teratail
回答率
85.29%
質問するログイン新規登録
トップJavaScriptに関する質問onsenUI switchのcheckedプロパティについて

Q&A

解決済

3回答

1743閲覧

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

shunta71010
shunta71010

総合スコア18

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

1クリップ

投稿2019/02/26 02:26

編集2019/02/26 08:02

0

1

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 から起きているエラーのようですが、
よくわかりません、、、

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

oikashinoa
oikashinoa

2019/02/27 07:30

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

2019/02/27 08:37

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

回答3件

0

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
oikashinoa

総合スコア2826

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rururu3
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
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さんが見たようなので補足があれば期待です。
guest

0

ベストアンサー

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
rururu3

総合スコア5545

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shunta71010
shunta71010

2019/02/26 08:03

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

2019/02/26 08:35

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

2019/02/26 08:38 編集

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

2019/02/26 08:42

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

2019/02/26 09:45

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

2019/02/27 07:27

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

2019/02/27 07:36

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

0

とりあえずで良ければ

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

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

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

投稿2019/02/26 09:08

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問

トップJavaScriptに関する質問

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