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);
});
}
}
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 */ };
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();
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
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
};
})();
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;
}
Related
I have a problem where if i want to add a parameter to my click attribute then it calls the function as soon as it renders
here is my test html:
return html`
<button class="menu-btn" #click="${this._OpenSubMenu(1)}>test</button>"
`;
}
And the function:
_OpenSubMenu(test:number) {
console.log("Hello")
}
This output Hello as soon as the page is rendered.
So how can i avoid this while still adding a parameter to my function?
You need to make your function return a function. Your click function will then execute the returned function, and due to closure's will still have access to the params.
eg..
_OpenSubMenu(test:number) {
var that = this;
return function () {
console.log("Hello");
//test is also a closure so you can use here
//that will equal this
}
}
If you want access to this, you could also use an arrow function
_OpenSubMenu(test:number) {
return () => {
console.log("Hello");
//test is also a closure so you can use here
//this will also still be valid here
}
}
function layoutMod() {
standardId = document.getElementById("standard");
fancyId = document.getElementById("fancy");
standardId.onclick = function() {
standard();
};
fancyId.onclick = function() {
fancy();
};
};
How can I use the onclick events defined above in a function??? Is it a good practice to load the function at page load?? I need to define in a function the onclick event beacuse I don't want to use global variables.
What you've written should work. However, you should note that by not using the var keyword, you're still creating global variables inside of your function. I would suggest...
function onloadHandler() {
document.getElementById("standard").onclick = function() {
// Do something
};
document.getElementById("fancy").onclick = function() {
// Do something else
};
};
It can get messing when you nest functions inside of each other. In this case, I would suggest removing the outer function so that your code looks like this:
document.getElementById("standard").onclick = function() {
standard();
};
document.getElementById("fancy").onclick = function() {
fancy();
};
The code does not need to be in a function, it will automatically be run on page load. Since you don't want global variables, just don't use variables at all.
I have a block of JavaScript/jQuery that works fine.
<script type="text/javascript">
$(function () {
function doSomething() {
// Do something amazing here!
}
// Many various jQuery handlers and support functions
});
</script>
But now I'd like my doSomething() function to be callable from another block of script on the same page.
I understand I can do that by moving doSomething() outside of the jQuery function ($(function () {})). But then doSomething() wouldn't be able to call the helper functions inside of the jQuery function.
I could move the other functions outside of the jQuery function, but some of them are handlers that need to be initialized, and they share they same helper functions.
Is there a way to keep all my functions inside my jQuery function, but just make one of them visible outside of it?
And any suggestions on where I could go to read up on this?
JavaScript has functional scope. So, the reason you can't call your function if it is nested within
$(function () { ... });
is because it is only accessible within that function's scope.
You can easily move that function definition:
function doSomething() { ... }
outside of the $(function(){...}) function and still have access to variables within the $(function(){...}) function's scope by passing the variables as parameters to the function and then having it return any modifications:
$(function () {
var blah = 'blah';
var result;
result = doSomething(blah);
// Many various jQuery handlers and support functions
});
function doSomething(blah) {
// Do something amazing here!
return newBlah;
}
// Now you can call your doSomething function in the global scope too
var example = "test";
var result = doSomething(example);
Well, in fact you should move your logic from this wrapper.
It's intended for initialization of logic that should run after DOM is ready. You shouldn't make any functions here.
Consider following pattern for your code:
(function($) {
// Your logic here
// You could safely export your functions to
// global scope from here, if you really need
var app;
app = {
forms: doSomething
};
function doSomething() {
// Do something amazing here!
}
window.app = app;
$(function() {/* start interact with DOM */});
}(jQuery));
You can do it extending jQuery:
$.extend({
foo: new function () {
var _self = this;
_self.doSomething = function () {
};
_self.initialize = function () {
$('#button-x').click(function(){
_self.doSomething(); //use the function inside
});
};
});
$(function () {
$.foo.initialize();
$.foo.doSomething(); //use the function outside
});
Ok, I have being trying to find a solution for this for the past 3 hours...
I want to be able to create my own library, accessible function within function with function etc.
Here's what I want to do...
var outer=function()
{
this.inner=function()
{
this.innermost=function()
{
alert("innermost");
}
}
}
var outer=new outer;
function start()
{
//I want to call it like this but fails!
outer.inner.innermost();
}
Now this fails when I try to call the innermost. But if I just have a a function within a function, it works. For example:
var outer=function()
{
this.inner=function()
{
alert("inner");
}
}
var outer=new outer;
function start()
{
// this works
outer.inner();
}
All the examples I've found only show a function within a function.
I want to be able to create my own library of functions. With an easy way to access them, e.g.:
MyLib.SubLib.SubLib2.function
MyLib.SubLib.SubLib2.property
Any help on the matter would be greatly appreciated. Would I have to learn and use prototypes?
First of all, this is how you do it:
var outer = function() {
this.inner = {
innermost: function() {
alert("innermost");
}
}
}
var outer = new outer;
outer.inner.innermost();
The reason why it didn't work the way you did it is because you define a function inner - so outer.inner is a function. You could do var inner = new (outer.inner)(); and then call inner.innermost(); but that's obviously ugly and not what you want.
Here is my example object to demonstrate the issue.
Dog = Backbone.Model.extend({
initialize: function () {
},
Speak: function (sayThis) {
console.log(sayThis);
},
CallInternalSpeak: function () {
this.Speak("arf! from internal function.");
},
CallSpeakFromClosure: function () {
this.Speak("arf! fron outside closure.");
var callClosure = function () { // think of this closure like calling jquery .ajax and trying to call .Speak in your success: closure
console.log("we get inside here fine");
this.Speak("say hi fron inside closure."); // THIS DOES NOT WORK
}
callClosure();
}
});
var rover = new Dog;
rover.Speak("arf! from externally called function");
rover.CallInternalSpeak();
rover.CallSpeakFromClosure();
Since you are in Backbone, you can always use Underscore's bind function as well. After you define callClosure, you can wrap it with a proper binding:
callClosure = _.bind(callClosure, this);
The old "self" trick... make a reference to this, call it self, and reference it in the function.
CallSpeakFromClosure: function () {
this.Speak("arf! fron outside closure.");
var self = this;
var callClosure = function () {
console.log("we get inside here fine");
self.Speak("say hi fron inside closure."); // THIS DOES NOT WORK
}
callClosure();
}