title: Javascript "Uncaught TypeError: Cannot set property 'onclick' of null"
body: <p>Here is a problem that I am facing with my JavaScript code.</p>
  
  <p>I have a four different HTML files that are linked to a single external javascript file. In this external javascript file, I have about 4 functions that control events in those 4 different HTML files.</p>
  
  <p>Now the problem is this. Let's say that I attach an .onclick event to a button that exists only in contact.html. I also have other event functions in the javascript file that controls other elements in other HTML files. If I load contact.html file, everything works fine. However, if I load other HTML files whose event functions are declared after the .onclick event for contact.html, those functions do not work at all.</p>
  
  <p>I opened the developer's tool in Chrome and get this error message in console. "Uncaught TypeError: Cannot set property 'onclick' of null"</p>
  
  <p>I checked the indicated error in the external javascript file, and the error is referring to a variable declared for the button that exists only in contact.html.</p>
  
  <p>What I assume is happening is that since the browser cannot locate this variable in about.html, it stops reading the rest of the script.</p>
  
  <p>Here are things that I have done to solve the issue.</p>
  
  <p>1) I wrapped the entire codes in window.onload = function () {};, and nothing works.</p>
  
  <p>2) I removed only the functions for .onclick event for contact.html temporarily from the js file, and the codes that come right after this works.</p>
  
  <p>3) To see if the codes for .onclick event has any errors, I placed this event function inside  at the end of contact.html file, everything works without any errors.</p>
  
  <p>Given all the things that I have tried and the error messages that I get from the developer's tool in Chrome, I am thinking that if a browser sees a variable that is declared for an element in another HTML file, the browsers thinks of it as an error and thus stop executing the remaining part of the script.</p>
  
  <p>I may be wrong about this and am left with no clues whatsoever as to how to solve this issue, which is why I am posting this question here.</p>
  
  <p>Just to clarify a few things, following things are done</p>
  
  <p>1) A script tag that links to an external javascript file with a correct file path is placed at the end of body tag of every HTML file.</p>
  
  <p>2) I have tried wrapping everything with window.onload or $(document).ready(main); (with link to jQuery CDN of course).</p>
  
  <p>Here is my code:</p>
  
  <pre><code>window.onload = function () {
  
  // for INDEX.HTML page
  
  var pg = document.getElementById("main_pg");
  var text = document.getElementById("main_slide");
  var box = document.getElementById("slider");
  
  setTimeout(function() {
      pg.innerHTML = "Capturing Nature";
      pg.style.fontSize = "2em";
      box.style.background ="#7FB030"
      box.style.border = "3px solid #7FB030";
  }, 2500);
  
  // for GALLERY.HTML page
  
  var action = document.getElementsByClassName("mouse");
  
  var galleryHover = function () {
      for (i = 0; i &lt; action.length; i++) {
          action[i].onmouseover = function () {
              var source = this.getAttribute("href");
              var target = document.getElementById("target");
              target.src = source;
          };
      };
  };
  galleryHover();
  
  var addon = document.getElementById("mybutton");
  
  addon.onclick = function () {
      var file_name = document.getElementById("file_name").value;
      var list = document.createElement("li");
      var anchor = document.createElement("a");
      anchor.setAttribute("href","images/"+file_name);
      anchor.setAttribute("class", "mouse");
      var new_img = document.createElement("img");
      new_img.setAttribute("src", "images/"+file_name);
      anchor.appendChild(new_img);
      list.appendChild(anchor);
      var append_target = document.getElementById("gallery_list");
      append_target.appendChild(list);
      galleryHover();
  };
  
  // for ABOUT.HTML page
  
  var set_date = function () {
      var nd = new Date();
      var sm = nd.getMonth();
      var month_array = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
      var cm = month_array[sm];
      var cd = nd.getDate();
      var cy = nd.getFullYear();
  
      var today_date = document.getElementById("today_date");
          today_date.innerHTML = cm + " " + cd + ", " + cy;
  };
  set_date();
  
  var bio_img = document.getElementsByClassName("bio_img");
  var bio_target = document.getElementById("bio");
  for (i = 0; i &lt; bio_img.length; i++) {
      (function(m) {
          bio_img[i].onmouseover = function() {
              bio_target.innerHTML = "";
              var new_bio = document.createElement("img");
              var new_index = m + 1;
              var new_path = "images/bio" + new_index + ".jpg";
              new_bio.setAttribute("src", new_path);
              bio_target.appendChild(new_bio);
          };
      })(i);
  };
  
  // for CONTACT.html page
  
  var input_fields = document.getElementsByClassName("input_content");
  var warning_message = document.getElementsByClassName("warning_message");
  var input_button = document.getElementById("submit");
  input_button.onclick = function (e) {
      for (i = 0; i &lt;= input_fields.length; i++) {
          var input_value = input_fields[i].value;
          var value_length = input_value.length;
          if (value_length == 0) {
              e.preventDefault();
              var warning = warning_message[i];
              warning.innerHTML = "This field is required.";
          } else if (value_length &gt; 0) {
              var warning = warning_message[i];
              warning.innerHTML = "";
              };
          };
      };
  };
  </code></pre>
  
  <p>This is the HTML code for gallery.html page, which works fine.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;RadicalPhoto Gallery&lt;/title&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Gruppo' rel='stylesheet'&gt;
  &lt;link type="text/css" rel="stylesheet" href="css/radicalphoto.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="header"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="gallery.html"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;
      &lt;/ul&gt;
      &lt;h1&gt;RadicalPhoto&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div id="main_wrapper"&gt;
      &lt;div id="content"&gt;
          &lt;h2&gt;Gallery&lt;/h2&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.&lt;/p&gt;
          &lt;p&gt;Store an image in images folder and Enter the file name below to insert a new image in the gallery&lt;/p&gt;
          &lt;p&gt;Name:
              &lt;input type="text" name="visitor_name" id="file_name" placeholder="cat_thumb.jpg"&gt;
          &lt;/p&gt;
          &lt;button id="mybutton"&gt;Try it&lt;/button&gt;
          &lt;div id="gallery"&gt;
              &lt;ul id="gallery_list"&gt;
                  &lt;li&gt;
                      &lt;a class="mouse" href="images/blue_dress.jpg"&gt;
                          &lt;img src="images/blue_dress_thumb.jpg"&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a class="mouse" href="images/boxer.jpg"&gt;
                          &lt;img src="images/boxer_thumb.jpg"&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a class="mouse" href="images/country_boy_relaxing.jpg"&gt;
                          &lt;img src="images/country_boy_relaxing_thumb.jpg"&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a class="mouse" href="images/eye.jpg"&gt;
                          &lt;img src="images/eye_thumb.jpg"&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a class="mouse" href="images/ice_swim.jpg"&gt;
                          &lt;img src="images/ice_swim_thumb.jpg"&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a class="mouse" href="images/sitting.jpg"&gt;
                          &lt;img src="images/sitting_thumb.jpg"&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;p&gt;
                  &lt;img id="target" src="images/blue_dress.jpg" alt=""&gt;
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="footer"&gt;
          &lt;p&gt;All content &amp;copy; Copyright&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="js/main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is about.html page, and this is where the javascript stops working giving me the error message mentioned above.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;RadicalPhoto About&lt;/title&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Gruppo' rel='stylesheet'&gt;
  &lt;link type="text/css" rel="stylesheet" href="css/radicalphoto.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="header"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="gallery.html"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;
      &lt;/ul&gt;
      &lt;h1&gt;RadicalPhoto&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div id="main_wrapper"&gt;
      &lt;div id="content"&gt;
          &lt;h2&gt;About RadicalPhoto&lt;/h2&gt;
          &lt;p&gt;Today is &lt;span id="today_date"&gt;July 17, 2015&lt;/span&gt;. Stay tuned, we have exciting news about our company coming in a few more weeks!&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.&lt;/p&gt;
          &lt;h3&gt;Our Team&lt;/h3&gt;
          &lt;p id="bios"&gt;
              &lt;a class="bio_img" href="sheila.html"&gt;Sheila&lt;/a&gt; (President) | 
              &lt;a class="bio_img" href="frank.html"&gt;Frank&lt;/a&gt; (Vice President) | 
              &lt;a class="bio_img" href="joanne.html"&gt;Joanne&lt;/a&gt; (Senior Photographer)
          &lt;/p&gt;
          &lt;div id="bio"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="footer"&gt;
          &lt;p&gt;All content &amp;copy; Copyright&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="js/main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>