

Monaca Cloud IDEにてプログラミングの勉強をしています。

本題ですが、ons-switchのメソッド isCheckedを使ってPタグの内容を変更しようと”monaca公式ガイドブック
HTML５ハイブリッドアプリ開発”を参考にやってみましたが、上手くいきませんでした。（ons-
switchは表示されていますが、Pタグの内容が変更できていません）  
ご教授宜しくお願いします。

[code]

    <!DOCTYPE HTML>
    <html>
     <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
      <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
      <script src="components/loader.js"></script>
      <link rel="stylesheet" href="components/loader.css">
      <link rel="stylesheet" href="css/style.css">
      <script>
        ons.bootstrap();
      </script>
     </head>
     <body>
        <ons-switch var="myswitch" checked onclick="switchClicked()">           </ons-switch>
        <p id="info"><p/>
       <script>
          function switchClicked(){
          document.querySelector('#info').text(mySwitch.isChecked());}
       </script>  
      </body>
     </html>
    
[/code]


CC BY-SA 3.0
2016-11-06T04:41:19.503
30128
2017-01-05T11:47:44.847
19440
question
javascript monaca onsen-ui
ons-switchの使い方


isChecked()はスイッチがONの場合にtrueを返すだけなので、期待した動きにならないのだと思います。  
<https://ja.onsen.io/v1/reference/ons-switch.html#methods-summary>

[code]

    function switchClicked(){
      if (myswitch.isChecked() == true) {
      document.querySelector('#info').text('On');
      } else {
      document.querySelector('#info').text('Off');
      }
    }
    
[/code]


CC BY-SA 3.0
2016-11-10T10:24:47.540
30304
2016-11-10T10:37:58.263
2016-11-10T10:37:58.263
19445
19445
30128
answer


これでどうでしょうか？

[code]

    <script>
        function switchClicked(){
            $('#info').text(mySwitch.isChecked());
        }    
    </script>
    
[/code]


CC BY-SA 3.0
2016-12-02T08:28:36.713
30834
2016-12-02T08:28:36.713
12265
30128
answer


Monacaデバッガーを使用すると、下記エラーが表示されます。

> Uncaught ReferenceError: mySwitch is not defined

`var="myswitch"`のコーディングミスによるエラーです。

それを修正して再度確認すると、下記エラーが表示されます。

> Uncaught TypeError: Object # has no method 'text'

本に書いてあることが正しいとは限りません。

[code]

            document.querySelector('#info').innerHTML = String(mySwitch.isChecked());
    
[/code]

または、

[code]

            document.querySelector('#info').textContent = String(mySwitch.isChecked());
    
[/code]

とすることで動作します。

[HTML DOM querySelector()
Method](http://www.w3schools.com/jsref/met_document_queryselector.asp)
も参照してください。


CC BY-SA 3.0
2016-12-04T08:48:24.230
30883
2016-12-04T08:48:24.230
9566
30128
answer