title: TypeError: null is not an object, when being called from function
body: <p>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</p>
  
  <p>I get the following error:</p>
  
  <pre><code>[Error] TypeError: null is not an object (evaluating 'document.getElementById("menuTitle").innerHTML = "&lt;div class=\"main-logo\"&gt;&lt;img src=\"img/logo.png\"&gt;&lt;/div&gt; " + titel')
      homeText (main.js:16)
      homeModifier (main.js:21)
      hasPrivateKey (main.js:11)
      global code (main.js:5)
  </code></pre>
  
  <p>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? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 = "&lt;div class=\"main-logo\"&gt;&lt;img src=\"img/logo.png\"&gt;&lt;/div&gt; " + 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;
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
      &lt;link rel="icon" sizes="192x192" href="./img/touch-icon.png"&gt;
      &lt;link rel="apple-touch-icon" href="./img/touch-icon-iphone.png"&gt;
      &lt;link rel="apple-touch-icon" sizes="76x76" href="./img/touch-icon-ipad.png"&gt;
      &lt;link rel="apple-touch-icon" sizes="120x120" href="./img/touch-icon-iphone-retina.png"&gt;
      &lt;link rel="apple-touch-icon" sizes="152x152" href="./img/touch-icon-ipad-retina.png"&gt;
      &lt;link rel="shortcut icon" type="image/x-icon" href="./img/favicon.ico"&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="./js/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="./js/main.css"&gt;
  
  
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="./js/main.js"&gt;&lt;/script&gt;
  
  
      &lt;title&gt;Crystal Box&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;div&gt;
  
      &lt;div class="col-md-4  col-md-offset-4"&gt;
          &lt;article class="widget widget__login"&gt;
              &lt;header class="widget__header one-btn"&gt;
                  &lt;div id="menuTitle" class="widget__title" style="width:100%;"&gt;
                      &lt;div class="main-logo"&gt;&lt;img src="img/logo.png"&gt;&lt;/div&gt;
                      Crystal Box Status
                  &lt;/div&gt;
              &lt;/header&gt;
  
  
  
              &lt;!-- Status Menu Block --&gt;
              &lt;form role="form" class="status" action="" method="POST"&gt;
              &lt;div class="widget__text"&gt;
                  &lt;div style="width:100%;"&gt;
                      You do not have the required private key to decode this.
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;/form&gt;
  
  
              &lt;!-- Login Menu Block --&gt;
              &lt;form role="form" class="login" action="" style="display: none;" method="POST"&gt;
                  &lt;div class="widget__content"&gt;
  
                      &lt;input type="text" name="username" class="validate[required]" id="username" maxlength="15" placeholder="Username"&gt;
  
                      &lt;input type="password" name="password" class="validate[required]" id="pass" placeholder="Password"&gt;
  
                      &lt;div class="widget__content filled" style="padding:12px 36px;"&gt;
                          &lt;input type="checkbox" class="modified-checkbox" name="terms" id="terms"&gt;
  
                          &lt;label for="terms"&gt;&lt;/label&gt;
                          &lt;label for="terms"&gt;I agree to the &lt;a href="terms.php"&gt;Terms of Service&lt;/a&gt;&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="widget__content"&gt;
                          &lt;button name="registerBtn"&gt;Sign In&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
  
              &lt;!-- Register Menu Block --&gt;
              &lt;form role="form" class="register" action="" style="display: none;" method="POST"&gt;
                  &lt;div class="widget__content"&gt;
                      &lt;input type="text" name="username" class="validate[required]" id="username" maxlength="15" placeholder="Username"&gt;
                      &lt;input type="password" name="password" class="validate[required]" id="pass" placeholder="Password"&gt;
                      &lt;input type="password" name="rpassword" class="validate[required]" id="rpass" placeholder="Repeat Password"&gt;
                      &lt;input type="text" name="email" class="validate[required]" id="email" placeholder="Email"&gt;
                      &lt;div class="widget__content filled" style="padding:12px 36px;"&gt;
                          &lt;input type="checkbox" class="modified-checkbox" name="terms" id="terms"&gt;
                          &lt;label for="terms"&gt;&lt;/label&gt;
                          &lt;label for="terms"&gt;I have explicit permission from the owner and&lt;br&gt;I agree to the &lt;a href="terms.php"&gt;Terms of Service&lt;/a&gt;&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="widget__content"&gt;
                          &lt;button name="registerBtn"&gt;Sign Up&lt;/button&gt;
                      &lt;/div&gt;
          &lt;/article&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>