TypeError: null is not an object, when being called from function

Question

I'm not sure why I'm getting a TypeError when I call it from a function in a function, but it works when I call it from the console

I get the following error:

[Error] TypeError: null is not an object (evaluating 'document.getElementById("menuTitle").innerHTML = "<div class=\"main-logo\"><img src=\"img/logo.png\"></div> " + titel')
    homeText (main.js:16)
    homeModifier (main.js:21)
    hasPrivateKey (main.js:11)
    global code (main.js:5)

When it's being triggerd from window.onload = hasPrivateKey();, however when I call the function hasPrivateKey() from the console in my browser, it works fine without any errors. What would cause such a error? And what am I missing?

window.onload = hasPrivateKey();

function hasPrivateKey() {
    if (localStorage.getItem("PrivateKey") === null) {
        //HTML5 local storage does not contain PrivateKey file for decryption.
        alert("Private Key not found, Please log in!");
        homeModifier("login");
    }
}

function homeText(titel) {
    document.getElementById("menuTitle").innerHTML = "<div class=\"main-logo\"><img src=\"img/logo.png\"></div> " + titel;
}

function homeModifier(status) {
    if (status == "login") {
        homeText("Sign In");
        $(".status").fadeOut(function () {
            $(".login").fadeIn();
        });


    }
    if (status == "register") {
        homeText("Sign Up");
        $(".login").fadeOut(function () {
            $(".register").fadeIn();
        });

    }
    if (status == "status") {
        homeText("Crystal Box Status")
        $(".register").fadeOut(function () {
            $(".status").fadeIn();
        });
    }
}

var homeDisplay = 0;

$(document).on('click', '.main-logo', function () {
    homeDisplay++;

    if (homeDisplay == 1) {
        homeModifier("login");
        console.log(homeDisplay);
    }

    if (homeDisplay == 2) {
        homeModifier("register");
        console.log(homeDisplay);
    }

    if (homeDisplay == 3) {
        homeModifier("status");
        console.log(homeDisplay);
        homeDisplay = 0;
    }
});

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600);

a,
article,
body,
div,
form,
header,
html,
img,
label {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}

article,
header {
    display: block;
}

body {
    line-height: 1;
}

input:active,
input:focus {
    outline: 0;
}

@font-face {
    font-family: Pe-icon-7-filled;
    src: url(../fonts/Pe-icon-7-filled.eot?-uyfy85);
    src: url(../fonts/Pe-icon-7-filled.eot?#iefix-uyfy85) format("embedded-opentype"), url(../fonts/Pe-icon-7-filled.woff?-uyfy85) format("woff"), url(../fonts/Pe-icon-7-filled.ttf?-uyfy85) format("truetype"), url(../fonts/Pe-icon-7-filled.svg?-uyfy85#Pe-icon-7-filled) format("svg");
    font-weight: 400;
    font-style: normal;
}

[class * =" pe-7f-"] {
    font-family: Pe-icon-7-filled;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: Pe-icon-7-stroke;
    src: url(../fonts/Pe-icon-7-stroke.eot?-9uki6c);
    src: url(../fonts/Pe-icon-7-stroke.eot?#iefix-9uki6c) format("embedded-opentype"), url(../fonts/Pe-icon-7-stroke.woff?-9uki6c) format("woff"), url(../fonts/Pe-icon-7-stroke.ttf?-9uki6c) format("truetype"), url(../fonts/Pe-icon-7-stroke.svg?-9uki6c#Pe-icon-7-stroke) format("svg");
    font-weight: 400;
    font-style: normal;
}

[class * =" pe-7s-"] {
    display: inline-block;
    font-family: Pe-icon-7-stroke;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: Pe-icon-glazzed;
    src: url(../fonts/Pe-icon-glazzed.eot?-othohl);
    src: url(../fonts/Pe-icon-glazzed.eot?#iefix-othohl) format("embedded-opentype"), url(../fonts/Pe-icon-glazzed.woff?-othohl) format("woff"), url(../fonts/Pe-icon-glazzed.ttf?-othohl) format("truetype"), url(../fonts/Pe-icon-glazzed.svg?-othohl#Pe-icon-glazzed) format("svg");
    font-weight: 400;
    font-style: normal;
}

[class * =" pe-7g-"] {
    display: inline-block;
    font-family: Pe-icon-glazzed;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*! Modified from font-awesome helper CSS classes - PIXEDEN
 *  Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (CSS: MIT License)
 */

[class * =" pe-7g-"],
[class * =" pe-7f-"] {
    display: inline-block;
}

body {
    background: url(../img/bg.jpg) 0 0 / cover;
    font-family: 'Source Sans Pro', sans-serif;
    color: rgba(255, 255, 255, .9);
    font-weight: 300;
}

.main-logo {
    display: inline-block;
    vertical-align: top;
    margin-right: 7px;
}

.main-search input:focus:-moz-placeholder {
    opacity: .3;
}

.main-search input:focus::-moz-placeholder {
    opacity: .3;
}

.main-search input:focus:-ms-input-placeholder {
    opacity: .3;
}

.main-search :-moz-placeholder {
    transition: opacity .3s;
    color: rgba(255, 255, 255, .9);
}

.main-search ::-moz-placeholder {
    transition: opacity .3s;
    color: rgba(255, 255, 255, .9);
}

.main-search :-ms-input-placeholder {
    transition: opacity .3s;
    color: rgba(255, 255, 255, .9);
}

.widget {
    margin-top: 25px;
    margin-bottom: 15px;
}

.widget__header {
    position: relative;
    width: calc(100% + 0px);
    overflow: hidden;
}

.widget__title {
    float: left;
    padding-right: 10px;
    display: inline-block;
    background-color: rgba(0, 0, 0, .3);
    height: 64px;
    width: calc(100% - 130px);
    line-height: 68px;
}

.widget__text {
    padding-left:25px;
    float: left;
    padding-right: 10px;
    display: inline-block;
    background-color: rgba(0, 0, 0, .25);
    height: 64px;
    width: calc(100%);
    line-height: 68px;
}

.one-btn .widget__title {
    width: calc(100% - 64px);
}

.one-btn .widget__text {
    width: calc(100%);
}

.widget__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget__content {
    position: relative;
    margin-top: 1px;
    width: calc(100% + 0px);
}

.widget__content.filled {
    background-color: rgba(0, 0, 0, .4);
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 15px;
}

[class * =tabs__content--] {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    display: none;
}

.message__write input[type=text]:focus:-moz-placeholder {
    opacity: .3;
}

.message__write input[type=text]:focus::-moz-placeholder {
    opacity: .3;
}

.message__write input[type=text]:focus:-ms-input-placeholder {
    opacity: .3;
}

.message__write :-moz-placeholder {
    transition: opacity .3s;
    color: rgba(255, 255, 255, .9);
}

.message__write ::-moz-placeholder {
    transition: opacity .3s;
    color: rgba(255, 255, 255, .9);
}

.message__write :-ms-input-placeholder {
    transition: opacity .3s;
    color: rgba(255, 255, 255, .9);
}

.widget__login {
    margin-top: calc(50vh - 63px * 4 / 2);
}

.modified-checkbox {
    display: none;
}

.modified-checkbox + label {
    position: relative;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 50%;
    cursor: pointer;
    color: #f35857;
    font-size: 18px;
    display: inline-block;
}

.modified-checkbox + label:after {
    font-family: Pe-icon-7-stroke;
    content: '\e644';
}

.modified-checkbox:checked + label {
    color: #52d669;
}

.modified-checkbox:checked + label:after {
    content: '\e66c';
}

.widget__login .widget__content {
    margin-top: 0;
}

.widget__login button,
.widget__login input[type=password],
.widget__login input[type=text] {
    display: inline-block;
    width: 100%;
    border: none;
    height: 64px;
    vertical-align: top;
    background-color: rgba(0, 0, 0, .25);
    margin: 0px 0 0;
    padding-left: 24px;
    font-weight: 100;
    color: #fff;
}

.widget__form button:focus:-moz-placeholder,
.widget__form input[type=password]:focus:-moz-placeholder,
.widget__form input[type=text]:focus:-moz-placeholder,
.widget__login button:focus:-moz-placeholder,
.widget__login input[type=password]:focus:-moz-placeholder,
.widget__login input[type=text]:focus:-moz-placeholder {
    opacity: .3;
}

.widget__form button:focus::-moz-placeholder,
.widget__form input[type=password]:focus::-moz-placeholder,
.widget__form input[type=text]:focus::-moz-placeholder,
.widget__login button:focus::-moz-placeholder,
.widget__login input[type=password]:focus::-moz-placeholder,
.widget__login input[type=text]:focus::-moz-placeholder {
    opacity: .3;
}

.widget__form button:focus:-ms-input-placeholder,
.widget__form input[type=password]:focus:-ms-input-placeholder,
.widget__form input[type=text]:focus:-ms-input-placeholder,
.widget__login button:focus:-ms-input-placeholder,
.widget__login input[type=password]:focus:-ms-input-placeholder,
.widget__login input[type=text]:focus:-ms-input-placeholder {
    opacity: .3;
}

.widget__login button {
    background-color: rgba(0, 0, 0, .4);
    padding-left: 0;
    -webkit-transition: background-color 250ms;
    transition: background-color 250ms;
}

.widget__login button:active,
.widget__login button:focus {
    outline: 0;
}

.widget__login button:hover {
    background-color: rgba(0, 0, 0, .2);
}

.widget__form :-moz-placeholder,
.widget__login :-moz-placeholder {
    transition: opacity .3s;
    color: rgba(255, 255, 255, .9);
}

.widget__form ::-moz-placeholder,
.widget__login ::-moz-placeholder {
    transition: opacity .3s;
    color: rgba(255, 255, 255, .9);
}

.widget__form :-ms-input-placeholder,
.widget__login :-ms-input-placeholder {
    transition: opacity .3s;
    color: rgba(255, 255, 255, .9);
}

@media (max-width:480px) {
    body {
        background-repeat: no-repeat;
        overflow-x: hidden;
    }

    .widget__title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .widget__text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@keyframes hearthbeat {
    from { transform: none; }
    20% { transform: scale(1.2); }
    to { transform: none; }
    30% { transform: scale(1.0); }
    to { transform: none; }
    40% { transform: scale(1.2); }
    to { transform: none; }
    50% { transform: scale(1.0); }
    to { transform: none; }
}

.main-logo {
    /* ... */
    animation: hearthbeat 1s infinite;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" sizes="192x192" href="./img/touch-icon.png">
    <link rel="apple-touch-icon" href="./img/touch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="./img/touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="./img/touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="./img/touch-icon-ipad-retina.png">
    <link rel="shortcut icon" type="image/x-icon" href="./img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="./js/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./js/main.css">


    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="./js/main.js"></script>


    <title>Crystal Box</title>
</head>
<body>


<div>

    <div class="col-md-4  col-md-offset-4">
        <article class="widget widget__login">
            <header class="widget__header one-btn">
                <div id="menuTitle" class="widget__title" style="width:100%;">
                    <div class="main-logo"><img src="img/logo.png"></div>
                    Crystal Box Status
                </div>
            </header>



            <!-- Status Menu Block -->
            <form role="form" class="status" action="" method="POST">
            <div class="widget__text">
                <div style="width:100%;">
                    You do not have the required private key to decode this.
                </div>
            </div>
            </form>


            <!-- Login Menu Block -->
            <form role="form" class="login" action="" style="display: none;" method="POST">
                <div class="widget__content">

                    <input type="text" name="username" class="validate[required]" id="username" maxlength="15" placeholder="Username">

                    <input type="password" name="password" class="validate[required]" id="pass" placeholder="Password">

                    <div class="widget__content filled" style="padding:12px 36px;">
                        <input type="checkbox" class="modified-checkbox" name="terms" id="terms">

                        <label for="terms"></label>
                        <label for="terms">I agree to the <a href="terms.php">Terms of Service</a></label>
                    </div>

                    <div class="widget__content">
                        <button name="registerBtn">Sign In</button>
                    </div>
                </div>
            </form>

            <!-- Register Menu Block -->
            <form role="form" class="register" action="" style="display: none;" method="POST">
                <div class="widget__content">
                    <input type="text" name="username" class="validate[required]" id="username" maxlength="15" placeholder="Username">
                    <input type="password" name="password" class="validate[required]" id="pass" placeholder="Password">
                    <input type="password" name="rpassword" class="validate[required]" id="rpass" placeholder="Repeat Password">
                    <input type="text" name="email" class="validate[required]" id="email" placeholder="Email">
                    <div class="widget__content filled" style="padding:12px 36px;">
                        <input type="checkbox" class="modified-checkbox" name="terms" id="terms">
                        <label for="terms"></label>
                        <label for="terms">I have explicit permission from the owner and<br>I agree to the <a href="terms.php">Terms of Service</a></label>
                    </div>

                    <div class="widget__content">
                        <button name="registerBtn">Sign Up</button>
                    </div>
        </article>
    </div>
</div>
</body>
</html>

Remove () in window.onload = hasPrivateKey(); Currently this line executes hasPrivateKey() and assigns the return value to window.onload instead of the function itself. Hence when hasPrivateKey() calls homeText() there is no element with id menuTitle yet. — Andreas
– Andreas, Commented Sep 16, 2016 at 14:26
Another option would be to read the documentation for jQuery. Firstly, you have two versions of jQuery loaded, secondly, there's a built in DOM ready handler so you don't have to use window.onload at all. Even better would be to just move the script to the bottom. — adeneo
– adeneo, Commented Sep 16, 2016 at 14:30
@adeneo The 2 versions of jQuery apparently happend when I created the snipped. Was not aware there was a DOM ready handler available, thanks for the tip. — John Cadac
– John Cadac, Commented Sep 16, 2016 at 14:39

andleer · Accepted Answer · 2016-09-16 14:31:20Z

1

Including the parenthesis in your assignment will assign the results of your function: hasPrivateKey(). Execution occurs immediately. You want execution to be deferred until the onload event occurs.

Use this instead: window.onload = hasPrivateKey;

You are assigning the result of the function. You want to assign the function.

answered Sep 16, 2016 at 14:31

andleer

22.6k8 gold badges65 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeError: null is not an object, when being called from function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related