ons-switchの使い方


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]




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)
も参照してください。

