How to call function inside function through only HTML

Question

I just can't reach the function inside function using only HTML. How to call setLayout() using only HTML or is it able to call only in Javascript?

<button onclick="customize.setLayout('b.html');">Click Please</button>

Javascript:

 function customize() {
     function setLayout(text) {

        var selectedLayout = text;
        layout += selectedLayout;
        $.get(layout, function (data) {
            $("#layout-grid").html(data);
        });
    }
}

Answer 1

It isn't possible to call setLayout at all.

Functions defined in other functions are scoped to that function. They can only be called by other code from within that scope.

If you want to to be able to call customize.setLayout then you must first create customize (which can be a function, but doesn't need to be) then you need to make setLayout a property of that object.

customize.setLayout = function setLayout(text) { /* yada yada */ };

Answer 2

Multiple ways to call a function within a function. First of all, the inner function isn't visible to the outside until you explicitly expose it Just one way would be:

function outerobj() {

    this.innerfunc = function () { alert("hello world"); }

}

This defines an object but currently has no instance. You need to create one first:

var o = new outerobj();
o.innerfunc();

Another approach:

var outerobj = {

    innerfunc : function () { alert("hello world"); }

};

This would define an object outerobj which can be used immediately:

outerobj.innerfunc();