Onsen 2.0 - Hinzufügen eines Ereignis-Listeners zu Ons-Switch mit Javascript

Ich fürchte, mir fehlt etwas wirklich Einfaches, aber ich habe mehrere Versuche mit verschiedenen Fehlern versucht. Weiter zum Code:

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

So funktioniert das oben nicht. Es wird ein Fehler von @ erzeuUncaught TypeError: Cannot read property of on of null. Also nahm ich an, dass ich die Funktion zur Onload-Init-Funktion hinzufügen musste, aber sie schlug immer noch mit demselben Fehler fehl.

Ich habe alle hier aufgeführten Optionen ausprobiert:https: //onsen.io/guide/overview.html#EventHandlin ohne Erfolg. Dazu gehört die Verwendung von var anstelle von id und fast alles andere, von dem ich dachte, dass es funktionieren würde.

Edit: Vollständiger Code, der nicht funktioniert, aber in Codepen ohne Template-Tag funktioniert.

<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>

Ich verwende dies in ons.ready () und habe es außerhalb probiert, was zu demselben Fehler führt,cannot read property of addEventListener, wie oben für beide angegeben.

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

Letztes Update Ich schwöre: ENDLICH !!!! Vielen Dank, dass Sie @ Fran-Dios!

Nachdem Sie damit gearbeitet haben, ist init nicht das Ereignis, das Sie verwenden möchten. Sie möchten auf jeden Fall show für das verwenden, was ich versucht habe.

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);

Aus welchem Grund auch immer, wenn Sie init auf einem @ verwend<ons-tabbar> Wenn Sie die Tabulatortaste drücken, ändert sich der Status des Schalters. Bei Verwendung von show ist dies nicht der Fall. Wenn ich die Init-Aktion protokollierte, wurde die Seite außerdem noch zweimal als Init protokolliert, obwohl sie beim Start der App nicht angezeigt wurde. Show verursacht dies nicht. In jedem Fall ist der von @ fran-dios bereitgestellte Code die richtige Grundlage, um das zu erhalten, was ich brauchte, und seine Antwort ist immer noch richtig. Ich musste nur ein anderes Ereignis verwenden.

Antworten auf die Frage(2)

Ihre Antwort auf die Frage