0

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

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

<!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>
4
  • Monacaデバッガーで実行するとエラーメッセージが表示されていると思います。それが答えです。
    – otak-lab
    Commented 2016年11月6日 5:15
  • 今、投稿したコードを見直しましたら、pタグの閉じタグの/位置が間違えていました。しかし、依然として状況は変わりませんでした。
    – AquA
    Commented 2016年11月6日 13:31
  • まずはMonacaデバッガーを使用してデバッグしてください。
    – otak-lab
    Commented 2016年11月7日 3:28
  • teratailにて解決済み(https://teratail.com/questions/55765)
    – otak-lab
    Commented 2016年12月4日 9:18

3 件の回答 3

1

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

Uncaught ReferenceError: mySwitch is not defined

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

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

Uncaught TypeError: Object # has no method 'text'

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

        document.querySelector('#info').innerHTML = String(mySwitch.isChecked());

または、

        document.querySelector('#info').textContent = String(mySwitch.isChecked());

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

HTML DOM querySelector() Method も参照してください。

0

これでどうでしょうか?

<script>
    function switchClicked(){
        $('#info').text(mySwitch.isChecked());
    }    
</script>
-1

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

function switchClicked(){
  if (myswitch.isChecked() == true) {
  document.querySelector('#info').text('On');
  } else {
  document.querySelector('#info').text('Off');
  }
}
1
  • 回答にあるコードをコピーしてみましたが改善されませんでした。回答のコードでMonacaデバッガーを使ってみましたが、特にエラーの表示はなくスイッチのみの画面でした。console.logでどこまで実行されているか確認したところ、if文が上手くいっていないようでした。
    – AquA
    Commented 2016年11月15日 22:14

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。