Javascript Uncaught TypeError on browsers because of window.onload

Question

I want to show customed dialog when I clicked tags from fontawesome website. But the Chrome and Opera browser consoles said

Uncaught TypeError: Cannot set property 'onclick' of null at window.onload (main.js:9)

I need help. The paths, file names and variable names are all correct. I checked again and again. The same code works on another project, but in this, it doesn't work.

html code :

<head>
  <meta charset="utf-8">
  <title>MAKE YOUR GOAL</title>
</head>

//This is javascript insert code
<script type="text/javascript" src="../js/main.js"></script>

<body>
  //from here
  <div id="dialogDivID" class="dialogDiv">
    <div class="dialogContent">
      <span class="close">&times;</span>
      <div>
        <img src="../image/submitBtn.png">
      </div>
    </div>
  </div>
  //to here is for customed dialog

  //made background style with div. topBackground is not important
  <div id="topBackground"></div>

  <nav>
    //coverd with span to change css style
    <span class="icon">
    //If I click button or i tag, the dialog comes out
    <button id="addChallID"><i class="fas fa-plus fa-2x"></i></button> &nbsp;&nbsp;
    </span>
    <span class="icon">
    //same here
    <i id="settingID" class="fas fa-cog fa-2x"></i> &nbsp;&nbsp;
    </span>
    <span class="icon">
    //same here
    <i id="addFriendID" class="fas fa-users fa-2x"></i>
    </span>
  </nav>
 ...
</body>

javascript code (file name main.js) :

var modal = document.getElementById("dialogDivID");
var addChall = document.getElementById("addChallID");
var addFriend = document.getElementById("addFriendID");
var icons = document.getElementsByClassName("icon")[0];

var closeSpan = document.getElementsByClassName("close")[0];

window.onload = function() {
  //if I click addChall (button id="addChallID"), modal display block (show dialog)
  addChall.onclick = function() {
    modal.style.display = "block";
  };

  //If I click closeSpan (span class="close") close the dialog
  closeSpan.onclick = function() {
    modal.style.display = "none";
  };

  //if I click the window, dialog closed
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  };
};

wrap your document selectors inside onload function and try again.. — Rohith K P, Mar 17 '19 at 11:07
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Nick Parsons, Mar 17 '19 at 11:10

score 2 · Accepted Answer · answered Mar 17 '19 at 11:08

You must move even the code for getting references inside onload like so:

var modal
, addChall
, addFriend
, icons
, closeSpan

window.onload = function() {
  modal = document.getElementById("dialogDivID");
  addChall = document.getElementById("addChallID");
  addFriend = document.getElementById("addFriendID");
  icons = document.getElementsByClassName("icon")[0];
  closeSpan = document.getElementsByClassName("close")[0];

  //if I click addChall (button id="addChallID"), modal display block (show dialog)
  addChall.onclick = function() {
    modal.style.display = "block";
  };

  //If I click closeSpan (span class="close") close the dialog
  closeSpan.onclick = function() {
    modal.style.display = "none";
  };

  //if I click the window, dialog closed
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  };
};

!!IT SOLVED!! thank you so much I was dumb you saved my assignment thank you — H.Kwon, Mar 17 '19 at 11:15

Javascript Uncaught TypeError on browsers because of window.onload

1 Answers1