How to call a function inside a function via only HTML

Question

I just can't get to the function inside the function using only HTML. How to call setLayout () using only HTML , or can it only call 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

Unable to call setLayout at all.

Functions defined in other functions are tied to this function. They can only be called by other code from this area.

If you want to be able to call customize.setLayout , then you must first create customize (which may be a function, but not necessary), then you need to make the setLayout property of this object.

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

Answer 2

Several ways to call a function inside a function. First of all, the inner function is not visible from the outside until you explicitly expose it. One of the methods:

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

This defines the object, but does not currently have an instance. First you need to create it:

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

Another approach:

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

This will define an outerobj object that can be used immediately:

 outerobj.innerfunc(); 

Answer 3

The simple answer is: You cannot call setLayout() with this setting anywhere!

The reason that setLayout() will not be visible outside customize() even from other JavaScript code, because it is locally defined inside customize() , so it has a local scope, accessible only inside customize() . Like others, we mentioned that other ways are possible ... (^ __ ^)

You can return the response of setLayout() by returning it as a customize() method and use it in HTML , for example customize().setLayout('b.html'); eg.

 <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 Expression of a Expressed Function (IIFE) . This way you can omit the bracket by calling its method in the 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 }; })(); 

Answer 4

if you insist on this, 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 whether you even want to define and call setLayout from the outside

Answer 5

You need to consider it as an object and method

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

Sorry, I had to edit this code to clarify

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