Question

The way I know:

HTML:

<input type="button" id="msg" onclick="foo(this);" />

JS:

function foo(elementObj) { elementObj.toggle(); }

Is there any way to get reference to elementObj inside foo() without passing it as function argument?

How I want to do:

HTML:

<input type="button" id="msg" onclick="foo();" />

JS:

function foo() { elementObj = <any way I can get ref to html element here?>; elementObj.toggle(); }

P.S.

Call function like this: $("#msg").click(function(elementObj ) {elementObj.toggle();}

Is not what I need.

Answer 1

Is there any way to get reference to elementObj inside foo() without passing it as function argument?

Yes, just use proper unobtrusive jQuery event handler attaching such as .on, or its shorthands:

$('#msg').click(function() {
    //`this` references the clicked DOM element #msg
});

Or if you need to use the function foo elsewhere..

function foo(eventObject) { 
    //`this` reference the #msg element
}
$('#msg').click(foo);

---

As per OP edit:

function foo() {
   elementObj = <any way I can get ref to html element here?>;
   elementObj.toggle();
}

Yeah just use the ID selector $('#msg') or $(this) if you want to reference the clicked element.

function foo() {
   var elementObj = $(this);
   elementObj.toggle();
   //or more directly $(this).toggle()
}
$('#msg').click(foo);