How to use the ons-switch

I am studying programming at Monaca Cloud IDE.

I tried to change the contents of the P tag using the ons-switch method isChecked by referring to the monaca official guidebook HTML5 hybrid app development, but it didn't work. (The ons-switch is shown, but the contents of the P tag have not been changed.)
I look forward to your kind cooperation.

<!DOCTYPE HTML>
<html>
 <head>
  <metacharset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=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>
    <pid="info"><p/>
   <script>
      function switchClicked(){
      document.querySelector('#info').text(mySwitch.isChecked());}
   </script>  
  </body>
 </html>

javascript monaca onsen-ui

2022-09-30 16:33

3 Answers

When using the Monaca debugger, the following error is displayed:

Uncaught ReferenceError: mySwitch is not defined

var="myswitch" coding error.

If you correct it and check it again, the following error will be displayed.

Uncaught TypeError: Object# has no method 'text'

What is written in the book is not always correct.

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

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

works by doing .

2022-09-30 16:33

How about this?

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

2022-09-30 16:33

IsChecked() only returns true when the switch is on, so I don't think it's the expected movement.
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');
  }
}

2022-09-30 16:33

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656