How to call function inside function through only HTML

问题

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);
        });
    }
}

回答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 */ };

回答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();

回答3:

if you insist to do it this way, maybe define setLayout and then call it, something like this:

<script>
  function customize(text, CallSetLayout) {
    if (CallSetLayout) {
      (function setLayout(text) {
        //do something
        alert(text);
      })(text);
    }
  }

</script>

<button onclick="customize('sometext',true);">Click Please</button>

then you can decide if you even want to define and call setLayout from outside

回答4:

Simple answer: You can't call setLayout() with this setup anywhere!

The reason being, setLayout() will not be visible outside of customize() not even from other JavaScript code because it is defined locally inside customize() so it has local scope which is only available inside customize(). Like others have mentioned there are other ways possible... (^__^)

You can return the response of setLayout() by returning it as a method of customize() and use it in your HTML like customize().setLayout('b.html'); e.g.

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

JavaScript:

function customize() {

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

    return {
        setLayout: setLayout
    };

}

Another Approach

You can also define your main function i.e. customize as Immediately-Invoked Function Expression (IIFE). This way you can omit the parenthesis while calling its method in HTML section.

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

JavaScript

var customize = (function () {

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

    return {
        setLayout: setLayout
    };

})();

回答5:

You need to treat it as object and method

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

Sorry I had to edit this code for more clarification

function customize() {

     this.setLayout = function setLayout(text) {

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

来源：https://stackoverflow.com/questions/34461248/how-to-call-function-inside-function-through-only-html

标签

javascript

html

function

call