CODEWITHSUNDEEP
javascripthtml
H.Kwon
H.Kwon

Reputation: 27

Javascript Uncaught TypeError on browsers because of window.onload

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";
    }
  };
};

Upvotes: 1

Views: 55

Answers (1)

Anurag Srivastava
Anurag Srivastava

Reputation: 14413

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";
    }
  };
};

Upvotes: 2

Related Questions