How to pass parameters to a function declared like left = function()

Question

How can I pass parameters to a function declared like something = function(){};

window.prototype.initInterface = function(){
    this.mainPane = document.createElement('div');
    this.mainPane.style.border="5px solid grey";
    this.mainPane.style.margin="0px";
    this.mainPane.style.width="420px";
    this.mainPane.style.height="600px";

    this.exitButton = document.createElement('input');
    this.exitButton.setAttribute("type", "button");
    this.exitButton.setAttribute("value", "exit");

    this.exitButton.onclick = function(){
        document.body.removeChild(this.mainPane);
    };

    this.mainPane.appendChild(this.exitButton);

    document.body.appendChild(this.mainPane);
}

When the user presses the exit button I want to remove the mainPane from the body of the html page.

    this.exitButton.onclick = function(this.mainPage){
        document.body.removeChild(this.mainPane);
    };

Does not work

How can I do this?

`window.prototype`? I don't think `window` is a constructor... — Šime Vidas, Jan 23 '12 at 16:49
possible duplicate of [How can I access `this` in an event handler?](http://stackoverflow.com/questions/7696672/how-can-i-access-this-in-an-event-handler) — Felix Kling, Jan 23 '12 at 16:52
Thanks, the below worked: var self = this; this.exitButton.onclick = function(){ document.body.removeChild(self.mainPane); }; — Matt, Jan 23 '12 at 17:00

score 0 · Accepted Answer · edited May 23 '17 at 11:56

For your exitButton.onclick function to have access to variables you create in the enveloping initInterface function you want a to create a closure in the exitButton.onclick function by returning a function that performs the action you want and passing that the variable.

exitButton.onclick = function () {
    return (function() {
         document.body.removeChild(mainPane);
    })(mainPane);
};

Read more on how closures work here and here and see a working example fiddle.

Alternatively, you forget about closures and walk up the DOM from the button which triggers the event to your mainPane

exitButton.onclick = function() {
   // in here "this" is the object that triggered the event, exitButton
   document.body.removeChild(this.parentNode);
}

As an aside, window.prototype does not exist if you are doing this in a browser; window is the object at the top of prototype chain in browser scripting. You want just window.initInterface = function () {} which is the exact same thing as function initInterface() {} because everything you do in javascript in the browser becomes a property of window.

Wangsu · Answer 2 · 2012-01-23T18:03:08.357

-1

This function is the function w/o function name. It could only be used once and you may not easy to find out what parameters should be passed.

You can create another function like ：

function go(a1){}

And call it like window.prototype.initInterface = go(a1);

Or you can get some DOM parameters in this unnamed function by using functions like getDocumentById("DOM ID") etc.

edited Jan 23 '12 at 18:03

answered Jan 23 '12 at 16:58

Wangsu

86
1
5

This is not correct. First `function go(var a1){}` is not valid JavaScript. Second, a function does not need a name in order to pass arguments to it when called: `var foo = function(bar) {...}`. The confusion is more about *defining* a function and *calling* it. In the OP's code, he is *defining* a function, so every parameter name must follow certain rules, for example a name must not contain `.`. – Felix Kling Jan 23 '12 at 17:05
Thanks for correction! My mistake. I still recommend use some functions with names that could be reused and better to find out what parameters should be passed. – Wangsu Jan 23 '12 at 18:01

How to pass parameters to a function declared like left = function()

2 Answers2