Uncaught TypeError: Cannot set property 'onclick' of null in OnsenUI

Question

I'm developing a hybrid app by using visual studio, cordova and onsen-ui framework, this is my javascript code for navigation of pages

document.addEventListener('init', function (event) {
    var page = event.target;
        if (page.id === 'index') {
            page.querySelector('#push-button').onclick = function () {
                document.querySelector('#loginNavigator').pushPage('register.html', { data: { title: 'Register Your Profile' } });
            };
            page.querySelector('#forgot-password').onclick = function () {
                document.querySelector('#loginNavigator').pushPage('forgotPassword.html', { data: { title: 'Forgot Password?' } });
            };
        } else if (page.id === 'register') {
            page.querySelector('ons-toolbar .center').innerHTML = page.data.title;
        }
        else if (page.id === 'forgot') {
            page.querySelector('ons-toolbar .center').innerHTML = page.data.title;
        }
        else if (page.id === 'dashboard')
        {
            page.querySelector('#leadPage').onclick = function () {
                document.querySelector('#loginNavigator').pushPage('vendor/leads.html', { data: { title: 'My Leads' } });
            };
        }


});

and if user is already login and open the app, I have using this code

function onload()
{
    document.addEventListener("deviceready", onDeviceReady, false);

}
function onDeviceReady() {
    if (localStorage.getItem('login') == 'TRUE') {
        loginNavigator.replacePage('dashboard.html');
        dashboard();
    }
}

and in my body I'm already using onload="onload()", so my question is that, after login into my app, page replace by dashboard.html and if there is no click on any page this error is shown for dashboard.html page, I don't know what I'm doing wrong, please help me out, error is

Uncaught TypeError: Cannot set property 'onclick' of null

this is my dashboard.html page

<ons-page id="vendorLeads">
    <section class="bg-dashboard">
        <section class="width100">
            <div class="width50 ft-lt" id="leadPage">

                    <div class="iconClass">
                        <ons-icon icon="fa-id-card"></ons-icon>
                    </div>
                    <div class="textClass">
                        <div class="text-area">My Leads</div>
                        <div class="total-value"></div>
                    </div>

            </div>
            <div class="width50 ft-rt">
                <div class="iconClass">
                    <ons-icon icon="fa-address-book"></ons-icon>
                </div>
                <div class="textClass">
                    <div class="text-area">Queries</div>
                    <div class="total-value"></div>
                </div>

            </div>
        </section>
        <section class="width100">
            <div class="width50 ft-lt">
                <div class="iconClass">
                    <ons-icon icon="fa-envelope"></ons-icon>
                </div>
                <div class="textClass">
                    <div class="text-area">Inbox</div>
                    <div class="total-value">(coming soon)</div>
                </div>
            </div>
            <div class="width50 ft-rt">
                <div class="iconClass">
                    <ons-icon icon="fa-heart"></ons-icon>
                </div>
                <div class="textClass">
                    <div class="text-area">Shortlist</div>
                    <div class="total-value"></div>
                </div>
            </div>
        </section>
        <section class="width100">
            <div class="width50 ft-lt">
                <div class="iconClass">
                    <ons-icon icon="fa-check"></ons-icon>
                </div>
                <div class="textClass">
                    <div class="text-area">Profile Visit</div>
                    <div class="total-value"></div>
                </div>
            </div>
            <div class="width50 ft-rt">
                <div class="iconClass">
                    <ons-icon icon="fa-paper-plane"></ons-icon>
                </div>
                <div class="textClass">
                    <div class="text-area">Contact Click</div>
                    <div class="total-value"></div>
                </div>
            </div>
        </section>
    </section>
</ons-page>

this is my index.html page

<body onload="onload()">
    <ons-navigator swipeable id="loginNavigator" page="index.html"></ons-navigator>
    <template id="index.html">
        <ons-page id="index">
            <div class="page no-navbar">
                <div class="page-content login-cover-width-img">

                    <div class="padding">

                        <div class="logo-area">
                            <img src="images/logowhite3.png" class="img-logo">

                        </div>

                        <div class="login-panel">



                            <h5 class="vedor-heading1">Login to manage your account</h5>
                            <div class="from-wrapper">
                                <div class="form-item">
                                    <div class="form-item-title">

                                    </div>
                                    <div class="form-item-content">
                                        <input type="email" placeholder="username" id="username"  class="form-control usericon" required="required">
                                    </div>
                                </div>
                                <div class="form-item">
                                    <div class="form-item-title">

                                    </div>
                                    <div class="form-item-content">
                                        <input type="password" placeholder="Password" id="password"  class="form-control passicon" required="required">
                                    </div>

                                </div>
                            </div>

                            <a id="login" class="col button button-fill button-big color-black" onclick="loginVendor()">Login</a>
                            <div class="form-item-desc">
                                <a href="#" id="forgot-password" class="forget-password">Forgot password?</a>
                            </div>

                        </div>

                        <div class="login-footer">

                            <a href="#" id="push-button" class="create-account-button">Create Account</a>
                        </div>

                    </div>
                </div>
            </div>

        </ons-page>
    </template>
    <template id="invalid.html">
        <ons-dialog id="invalid">
            <div style="text-align: center; padding: 10px;">
                <p>
                    Sorry ! Either emaild id or password is incorrect
                </p>
                <p>
                    <ons-button onclick="hideDialog('invalid')">Close</ons-button>
                </p>
            </div>
        </ons-dialog>
    </template>