Onsen 2.0 - Adding event listener to Ons-Switch wi

Question

I fear I am missing something really simple, but I have tried multiple attempts with various errors. On to the code:

<script>
        document.getElementById("optStats").on("change", function(e) {
    alert("Switch changed!");
  });
    </script>
<ons-switch modifier="list-item" id="optStats"></ons-switch>

So the above does not work. It generates an error of Uncaught TypeError: Cannot read property of on of null. So I assumed that I needed to add the function to the onload init function but it still failed with the same error.

I have tried all the options listed here: https://onsen.io/guide/overview.html#EventHandling without success. This would include using var instead of id and just about anything else listed that I thought would work.

Edit: Full code that is not working, but works in codepen without template tag.

<ons-template id="options.html" >
        <ons-page>
            <ons-toolbar>
                <div class="center">Options</div>
            </ons-toolbar>         
            <ons-list modifier="inset" style="margin-top:10px;">
                <ons-list-item>
                  Detailed Stats
                  <ons-switch modifier="list-item" id="optStats"></ons-switch>
                </ons-list-item>
            </ons-list>            
        </ons-page>
    </ons-template>

I am using this in ons.ready() and have tried it outside which results in the same error, cannot read property of addEventListener, as listed above for both.

document.getElementById('optStats').addEventListener('change', function(e) {
      console.log('click', e.target.checked);
    });

Last Update I swear: FINALLY!!!! Thank you @Fran-dios!

After working with this, init is not the event you want to use, you definitely want to use show for what I was trying to do.

document.addEventListener("show", function(event){
    if (event.target.id == "pgOptions") { 
        document.getElementById('optStats').addEventListener('change', function(e) {
            localStorage.setItem('useDetailedStats', e.target.checked); 
            useDetailedStats = e.target.checked;
        });
        document.getElementById('optStats').setChecked(useDetailedStats);
      } 
},false);

For whatever reason, when using init on a <ons-tabbar>, whenever you would press the tab, it would cause the switch to change states. By using show, it does not. Additionally, when I logged the init action, the page, even though it was not being shown on app startup, was still being logged as being init twice. Show does not cause this. Either way, the code that @fran-dios provided is the correct basis to get what I needed and his answer is still correct, I just needed to use a different event.

Answer 1

I fear you are right. Perhaps what you want to use is JS' addEventListener rather than jQuery's on. The rest should be correct.

Update:

Super simple example: http://codepen.io/frankdiox/pen/WrKjew

<ons-page>
  <ons-switch id="mySwitch"></ons-switch>
</ons-page>
-----
document.getElementById('my-switch').addEventListener('change', function(e) {
  console.log('click', e);
});

Update 2:

The real problem is about initializing pages in Onsen UI 2. The best way is using page life cycle events, specifically init event.

document.addEventListener("init", function(event) {
  if (event.target.id == "my-page") {
    document.getElementById("my-switch").addEventListener('change', function(e) {
      console.log('click', e);
    });
  }
}, false);