John Cadac John Cadac - 2 months ago 8
Javascript Question

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

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>




Answer

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.