Why getElementById returns null in module pattern

Question

I'm trying to implement module pattern from an acticle from css-tricks Here is my return object:

var MyModule = (function() {
  var pSettings; //private context

  return {
      settings: {
          time: Date.now(),
          myBtn: document.getElementById('myBtn')
      },

      init: function () {
          pSettings = this.settings;
          this.bindUIActions();
      },

      bindUIActions: function () {
          pSettings.myBtn.onclick = someFunction;
          console.log('binding');
      },

      someFunction: function() {
          console.log('someFunction');
      }
  }
})();

Fiddle

When I use MyModule.init(), I have an error like myBtn is null

Uncaught TypeError: Cannot set property 'onclick' of null

, why is it happends?

Because there is not element with id `myBtn`. – Cerbrus Feb 26 '14 at 07:56 — Cerbrus, Feb 26 '14 at 07:56
Sorry, I have this element. Will update fiddle – uladzimir Feb 26 '14 at 07:57 — uladzimir, Feb 26 '14 at 07:57

jfriend00 · Accepted Answer · 2014-02-26T08:10:06.183

3

It's probably about timing. document.getElementById('myBtn') is being executed when my Module is first defined which is probably before your HTML document has been parsed and thus myBtn doesn't yet exist.

Your object inside ofMyModule and all of its properties are being created at the time that MyModule is first defined and created. The myBtn property is a static value, initialized when the property is first created. If you want it to be a function that is evaluated only upon demand, then you must make it a function that you can call at the desired time.

You have several ways you can fix it.

You can stop trying to pre-fetch the myBtn DOM element and just fetch it upon demand only when needed.
You can move this javascript to the end of the <body> tag or put it in some sort of ready function so it won't execute until the DOM is ready.
You can cache myBtn upon first use (when the DOM is ready) rather than in advance.
You can change the initialization of the myBtn property to be in the .init() method when the DOM is ready.

My suggestion would be the first option.

edited Feb 26 '14 at 08:10

answered Feb 26 '14 at 07:59

jfriend00

580,699
78
809
825

@baxxabit - Please read what I wrote again. I'm trying to explain to you that you are initializing the `settings.myBtn` property too early before the 'myBtn' element exists. – jfriend00 Feb 26 '14 at 08:03
I have wrote comment before you update answer, thanks! – uladzimir Feb 26 '14 at 08:04
I use angularjs template, so this is a problem, why myBtn property is null in module. Thanks for explaination. Module loaded before template – uladzimir Feb 26 '14 at 08:07
@baxxabit - You can also just initialize `myBtn` in the `.init()` method rather than in the initial definition when the DOM is ready. – jfriend00 Feb 26 '14 at 08:09

Why getElementById returns null in module pattern

1 Answers1