Using onclick() inside another function - javascript

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.

Related

Event handling inside constructor

I'm really sorry, but i can't figure out why it doesn't work. printStr() can access variable only defined in Foo constructor, but not in private function, that got triggered on mousedown event. Is there any way to access string without declaring printStr inside getBotheredByBrendanEich func?
function Foo(elem) {
elem.on('mousedown', getBotheredByBrendanEich);
function getBotheredByBrendanEich() {
var string = 'its just werks!';
elem.on('mouseup', printStr);
}
function printStr() {
console.log(string);
}
}
var test = new Foo($('#test'));
Your variable string is a local variable inside of the function get...() and is ONLY available inside of that scope. Local variables are only available within the function they are declared in, which in this case is your get...() function
If you want it available in a broader scope so that printStr() can use it, then you have to declare it at a higher scope.
You could solve this by using an anonymous function declared in the same scope:
function Foo(elem) {
elem.on('mousedown', getBotheredByBrendanEich);
function getBotheredByBrendanEich() {
var str = 'its just werks!';
elem.on('mouseup', function() {
console.log(str);
});
}
}
var test = new Foo($('#test'));
Or, you could pass the argument to the event handler with .bind():
function Foo(elem) {
elem.on('mousedown', getBotheredByBrendanEich);
function getBotheredByBrendanEich() {
var string = 'its just werks!';
elem.on('mouseup', printStr.bind(this, string));
}
function printStr(arg) {
console.log(arg);
}
}
var test = new Foo($('#test'));
Or, you could move the variable to a higher scope so it can be shared:
function Foo(elem) {
elem.on('mousedown', getBotheredByBrendanEich);
var str = 'its just werks!';
function getBotheredByBrendanEich() {
elem.on('mouseup', printStr);
}
function printStr() {
console.log(str);
}
}
var test = new Foo($('#test'));
In all cases though, this structure is troublesome because you've adding a new mouseup event handler everytime the mousedown event occurs. This means you will get multiple mouseup handlers after only a couple clicks. This is rarely ever what you really want to do.
I would suggest this which will not suffer from that problem:
function Foo(elem) {
var str = 'its just werks!';
elem.on('mousedown', function() {
// whatever code you want here
});
elem.on('mouseup', function() {
console.log(str);
});
}
var test = new Foo($('#test'));
One more comment. Your code doesn't show any reason to actually use a constructor here. It appears like you could just implement a normal function call since there is no object instance data.

Making Functions Public from Inside jQuery Function

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

Passing Parameters into a Callback Function

I have a function that listens for a click on the screen and fires a callback. It is part of a Helper object (which is why is preceded by the term Helper in my sample code. That is irrelevant however.
var Helper = {
bodyClickListener: function(fn) {
var window = document.getElementsByTagName('body')[0];
window.click();
CORE.dom.on(window, 'click', function(event) {
CORE.dom.off(window, 'click');
fn(event);
});
}
}
I need to be able to pass a function into this function with a parameter that has been previously set.
function someFunction() {
var popup = document.getElementById('tagResultsPopup');
Helper.bodyClickListener(function(popup) {
return function(event) {
event.stopPropagation();
removePopup(popup);
};
}(document.getElementById('tagResultsPopup')));
function removePopup(element) {
if(element) {
element.parentNode.removeChild(element);
}
};
}
The code above works, but you'll notice that I have to set the popup variable inside of the callback function. It has already been set above. How do I pass a reference to the earlier variable into the callback function.
If I understand your question correctly, you don't need to do much. You can just use the popup variable defined outside.
var popup = document.getElementById('tagResultsPopup');
Helper.bodyClickListener(function(event) {
event.stopPropagation();
//Don't set it
//var popup = document.getElementById('tagResultsPopup');
removePopup(popup);//popup will refer to the correct variable
});
The function that you are passing to bodyClickListener is a closure. You can simply reference 'popup' inside that function without any problem. You don't have to create a new variable.
The answer was to use closure in this way:
Helper.bodyClickListener(function(popup) {
return function(event) {
event.stopPropagation();
removePopup(popup);
};
}(document.getElementById('tagResultsPopup')));
That way the callback function has access to the variable I pass into the parameter function. So here, the return is actually the function I am passing as the callback.

Is this how you define a function in jQuery?

Is this how you define a function in jQuery?
$(document).ready( function () {
var MyBlah = function($blah) { alert($blah); };
});
Now to call the function I do:
MyBlah('hello');
First of all, your code works and that's a valid way of creating a function in JavaScript (jQuery aside), but because you are declaring a function inside another function (an anonymous one in this case) "MyBlah" will not be accessible from the global scope.
Here's an example:
$(document).ready( function () {
var MyBlah = function($blah) { alert($blah); };
MyBlah("Hello this works") // Inside the anonymous function we are cool.
});
MyBlah("Oops") //This throws a JavaScript error (MyBlah is not a function)
This is (sometimes) a desirable behavior since we do not pollute the global namespace, so if your function does not need to be called from other part of your code, this is the way to go.
Declaring it outside the anonymous function places it in the global namespace, and it's accessible from everywhere.
Lastly, the $ at the beginning of the variable name is not needed, and sometimes used as a jQuery convention when the variable is an instance of the jQuery object itself (not necessarily in this case).
Maybe what you need is creating a jQuery plugin, this is very very easy and useful as well since it will allow you to do something like this:
$('div#message').myBlah("hello")
See also: http://www.re-cycledair.com/creating-jquery-plugins
No, you can just write the function as:
$(document).ready(function() {
MyBlah("hello");
});
function MyBlah(blah) {
alert(blah);
}
This calls the function MyBlah on content ready.
No.
You define the functions exactly the same way you would in regular javascript.
//document ready
$(function(){
myBlah();
})
var myBlah = function(blah){
alert(blah);
}
Also: There is no need for the $
You can extend jQuery prototype and use your function as a jQuery method.
(function($)
{
$.fn.MyBlah = function(blah)
{
$(this).addClass(blah);
console.log('blah class added');
};
})(jQuery);
jQuery(document).ready(function($)
{
$('#blahElementId').MyBlah('newClass');
});
More info on extending jQuery prototype here: http://api.jquery.com/jquery.fn.extend/
jQuery.fn.extend({
zigzag: function () {
var text = $(this).text();
var zigzagText = '';
var toggle = true; //lower/uppper toggle
$.each(text, function(i, nome) {
zigzagText += (toggle) ? nome.toUpperCase() : nome.toLowerCase();
toggle = (toggle) ? false : true;
});
return zigzagText;
}
});
The following example show you how to define a function in jQuery. You will see a button “Click here”, when you click on it, we call our function “myFunction()”.
$(document).ready(function(){
$.myFunction = function(){
alert('You have successfully defined the function!');
}
$(".btn").click(function(){
$.myFunction();
});
});
You can see an example here: How to define a function in jQuery?
That is how you define an anonymous function that gets called when the document is ready.

Best practices for declaring functions inside jquery ready function

I haven't found a good reference for declaring my own functions inside the
jquery.ready(function(){});
I want to declare them so they are inside the same scope of the ready closure. I don't want to clutter the global js namespace so I don't want them declared outside of the ready closure because they will be specific to just the code inside.
So how does one declare such a function...and I'm not referring to a custom jquery extension method/function...just a regular 'ol function that does something trivial say like:
function multiple( a, b ){
return a * b;
}
I want to follow the jquery recommendation and function declaration syntax. I can get it to work by just declaring a function like the multiply one above...but it doesn't look correct to me for some reason so I guess I just need some guidance.
I believe that you would be okay just declaring the function inside the ready() closure, but here you can be a bit more explicit about the local scoping:
jQuery.ready(function() {
var myFunc = function() {
// do some stuff here
};
myFunc();
});
It might sound simple but you just ... declare the function. Javascript allows functions to have inner functions.
$(document).ready( function() {
alert("hello! document is ready!");
function multiply(a, b) {
return a * b;
}
alert("3 times 5 is " + multiply(3, 5));
});
I have a StartUp function, and I use it as printed bellow:
function StartUp(runnable)
{
$(document).ready(runnable.run);
}
var ExternalLinks =
{
run: function()
{
$('a[rel="external"]').bind('click', ExternalLinks.click);
},
click: function(event)
{
open(this.href);
return false;
}
}
StartUp(ExternalLinks);
var ConfirmLinks =
{
run: function()
{
$('a.confirm').bind('click', ConfirmLinks.click);
},
click: function(event)
{
if (!confirm(this.title)) {
return false;
}
}
}
StartUp(ConfirmLinks);
My web sites are modular, so every module has N actions and every action can have a .js file, so I just write function and call it with StartUp(...functionName...)

Categories