javascript module pattern: initialise two objects on load

Question

I have two objects defined, each one has an init function as follows

var TestSound = {
    settings: {
        testSoundFile : "static/main/persoonS",
        postUrl : "dummy.com",
    },
    init : function(){
        this.cacheDom();
         this.bindEvents();
    },
    cacheDom: function(){
        this.oneCertainButton = document.getElementById("buttonId");
        this.soundElement = document.getElementById("sound");
    },
    bindEvents : function(){
        that = this;
        this.oneCertainButton.onclick = function(){ that.playSound(that.settings.testSoundFile); };
    },
    ............

var CheckInput = {
   settings: {
    correctAnswer : "persoon",
   },
   init : function (){
       this.cacheDom();
       this.bindEvents();
   },
   cacheDom: function (){
       this.submitButton = document.getElementById("submitButtonId");
       this.answerInputBox = document.getElementById("answerId");
       this.feedbackField = document.getElementById("feedbackId");
   },
   bindEvents: function(){
       that = this;
       this.submitButton.addEventListener("click",  function(event){
  ..........

I wish to initialise them both (one after the other) with "window onload" like so:

window.onload = function() { 
   CheckInput.init.bind(CheckInput);
   TestSound.init.bind(TestSound);
};

This doesn't work apparently as the init functions do not seem to be called.

However, it works if I initialise just one of the modules like so:

window.onload =
   CheckInput.init.bind(CheckInput);

Any explanations on what is going wrong here much appreciated!

Function.prototype.bind does not call a function.

ASDFGerte
– ASDFGerte

2016-10-12 14:17:37 +00:00
Commented Oct 12, 2016 at 14:17 — ASDFGerte
– ASDFGerte, Commented Oct 12, 2016 at 14:17
Sure but it should be called when window.onload fires.

DeBaze
– DeBaze

2016-10-12 14:18:38 +00:00
Commented Oct 12, 2016 at 14:18 — DeBaze
– DeBaze, Commented Oct 12, 2016 at 14:18

Bergi · Accepted Answer · 2016-10-12 14:53:23Z

1

You want either

window.onload = function() { 
    CheckInput.init();
    TestSound.init();
};

or

window.addEventListener("load", CheckInput.init.bind(CheckInput));
window.addEventListener("load", TestSound.init.bind(TestSound));

Any explanations on what is going wrong here much appreciated!

You have to create a function to be used as a handler that is called when the event fires. You can do that by using bind or with a function expression, but if you use both then only another function will be created when the event happens, and the init method is not called at all.

edited Oct 12, 2016 at 14:53

answered Oct 12, 2016 at 14:44

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Bergi Over a year ago

@DeBaze Which one? What "doesn't work"? Do you get an error? What does the debugger say?

DeBaze Over a year ago

Well the 'this' in 'Check Input' still refers to the TestSound Object, that is in the 'bindEvents' function. However by logging 'this' (via JSON.Stringify) in the console from the 'init' function, it seems to correctly refer to 'Check Input'. I'm probably making a stupid mistake here, but cant put my finger on it

DeBaze Over a year ago

Note: I used the second option from the answer

Bergi Over a year ago

@DeBaze Ah, the that in bindEvents… Yeah, that doesn't work, because it's implicitly global and contains the last value assigned to it. Make it two local variables by prefixing them with var. I also would recommend strict mode.

Bergi Over a year ago

Regarding settings, that's different from that because it's a property not a variable. Yes, CheckInput.init.bind(CheckInput)(); does in theory work but in practice is bad style - it's equivalent to CheckInput.init.calll(CheckInput) or just CheckInput.init() and you should prefer the shorter (and more efficient) one.

|

Collectives™ on Stack Overflow

javascript module pattern: initialise two objects on load

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related