Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

TypeError cannot read property addEventListener of null



  • I am getting ‘TypeError cannot read property addEventListener of null’ when I try to press the a button that navigates to another page on my app. It is saying the error is in components.loader.js at line 41209, which is built in - here is the function and my html that goes with it that won’t fire:

    $(document).ready(function() {
        $("#register").click(register);
    });
    
    function register() {
      $.mobile.changePage("#registrationPage");
    }
    

    here is the html:

    <div data-role="content">
               <div style="text-align: center; margin-top: 30px;">
                <p>
                  <ons-input id="username" modifier="underbar" placeholder="Username"></ons-input>
                </p>
                <p>
                  <ons-input id="password" modifier="underbar" type="password" placeholder="Password"></ons-input>
                </p>
                <p id="loginFail" class="error">Incorrect username or password.</p>
                <p style="margin-top: 30px;">
                  <p class="new">New?</p><ons-button class="new button" id="register">Register</ons-button>
                  <ons-button class="button" id="login">Sign in</ons-button>
                </p>
                </div>
            </div>
    

    Can anyone see what I’m doing wrong? Many thanks!


  • Onsen UI

    From your code it looks like you’re using jQuery Mobile along with Onsen UI? If you want to use jQuery, you don’t need to also use jQuery Mobile.

    In this situation (Onsen UI + jQuery Mobile), it’s hard to tell exactly what might be happening. From the error, I would guess that #registrationPage doesn’t exist.



  • @asialgearoid I do have a #registrationPage in my html, I have all my html on one document and just have several divs with data-role = pages, I thought when it’s formatted like that the entire document loads even though only one page is visible? It had been working just fine until a few days ago and I haven’t changed the code for that transition?