javascript - Monaca app working in dashboard preview but not on Android 6 phone -

i'm trying modify basic todo-list example onsen-ui.

i've added new button in menu.

<ons-toolbar-button id="resptab" >     <ons-icon icon="ion-pie-graph" size="28px"></ons-icon>     table </ons-toolbar-button> 

and navigator wrapping list

<ons-splitter id="splitter">     <ons-splitter-side id="splitter-menu" page="menu.html"          side="left" width="220px" collapse swipeable>     </ons-splitter-side>     <ons-splitter-content>         <ons-navigator id="mynavigator" animation="slide" page="list.html"/>     </ons-splitter-content> </ons-splitter> 

i'm pushing new page script through event listener

document.queryselector('#resptab').addeventlistener('click', this.setresptable.bind(this)); 

and function

todo.setresptable = function() {     ons.notification.prompt('switch responsive table view',{         title: 'responsive table',         cancelable: true,          callback: function(label) {             document.queryselector('#mynavigator').pushpage('table.html')         }.bind(this)     });     } 

everything works fine expected in desktop dashboard preview when try monaca debugger on galaxy android 6 phone, fails error in log showing queryselector null

i’ve noticed above said button not shown in menu when run app on android phone, while - again - can see dashboard preview.

solved both issues replacing button menu item

<ons-list>     <ons-list-item data-filter="all" tappable>all</ons-list-item>     <ons-list-header>status</ons-list-header>     <ons-list-item data-filer="uncompleted">pending</ons-list-item>     <ons-list-item data-filter="completed">completed</ons-list-item>     <ons-list-header>responsive</ons-list-header>     <ons-list-item id="resptab" ><ons-icon icon="ion-pie-graph" size="28px"></ons-icon>rxtable</ons-list-item>         </ons-list> 

and setting event handler in menu init

document.addeventlistener('init', function(event) {     var view = event.target.id;     if (view === 'menu' || view === 'list') {         todo[view + 'init'](event.target);     }; }, false); 

which calls

todo.menuinit = function(target) {     document.queryselector('#resptab').addeventlistener('click', this.setresptable.bind(this));      } 

in end of article there corresponding version in onsenui react, extract render function below:

<page>     <list datasource={['searching', 'lists', 'twitting', 'google drive','settings']}     renderrow={(title) => (         <listitem key={title}          onclick={() => this.hide2title(title)} tappable>{title}         </listitem>     )}/> </page> 

in latter case, notice array function pass value method.