calling outside javascript function within jquery code

Question

$(function(){
function f1(){}
function f2(){}
}
<Input type = radio Name = radiobutton Value = "something" checked=checked onClick= //here call f1()//>

I try to get access to f1 function in OnClick

code like this doesn't work:

$.function.f1()
$.function().f1()

• Selvakumar Arumugam: You should bind the handler inside $(function () { ... });. funcitons f1 and f2 are out of scope and so you won't be able to access it from inline DOM. As far as I know ($.function.f1() / $.function().f1()) are syntactically invalid.
• Stefan H: Additionally, you should close $( after your last }
• Blazemonger: Please don't use onClick attributes in your HTML. Use .on('click', ...) instead; it keeps your JavaScript and HTML strictly separated.
• Selvakumar Arumugam: You should read about un-obstructive javascript programming..

Answer 1

That's because you should be doing it something like this:

$(function () {
 function foo () { }
 function bar () { }
 // bind
 $('input').on('click', foo);
});

... instead of putting an onclick= attribute on your HTML markup.

EDIT

As requested, some quick notes on why you should do the jQuery bind instead of the onclick markup thing.

1. You're already using jQuery, plain and simple. Use it.
2. There should be significant effort made to separate your HTML, CSS and JS. HTML in HTML files, JS in JS files, blah. Putting in onclick=do_backflips() in your HTML markup violates that, and will lead to nightmarish maintenance issues in the future, among other things.
3. DOM0 onclick= syntax is inherently 1:1. Which means that naturally, for each event of each element, you only get to attach one single event handler. That definitely sucks balls.
4. By defining your f1 and f2 functions inside the document.ready handler function, you're limiting their scope within that function. This means that they can't be referenced outside that scope, which means that the script interpreter won't know about f1 where your HTML markup is. You have to attach event handlers where the handlers are known, and that's inside document.ready (if that makes sense).

• Richard Neil Ilagan: ^ That's going to go into lengthy discussion on why the heck DOM2 is preferred over DOM0, and how jQuery normalizes all the DOM2 discrepancy across browsers... but what they heck. I'll do an edit.
• Martus0: Thank ypu very much for clarification. For sure it's the solution for my problem. I don't understand how I can use it with my created radio button. I have already tried: $('#radiobutton').on('click', f1); $('radiobutton').on('click', f1); but it doesn't work
• Martus0: Radiobutton is in div radio1. It works for me :) $('#radio1').click(function() { f1() })

Answer 2

The point of using $( function(){ ... } ) is that whatever inside is run only after the DOM has finished loading. There's no benefit to defining functions there unless the goal is to keep the namespace clean and use the functions in the local scope.

In this case you need the functions outside the scope so just move them outside the anonymous function or bind the event to the radio button inside the scope.