jQuery - Calling a function inline
Solution 1
In your second example, you've declared myfunction
inside the anonymous function you're passing to .ready()
. That means myfunction
is a local variable, which is only in scope inside that anonymous function, and you cannot call it from anywhere else.
There are two solutions.
First, you can declare it outside (before or after) the call to .ready()
. This should not cause any interference with jQuery. If it does, something else is wrong (perhaps a simple syntax error?) that we'd welcome you to bring up in a StackOverflow question.
Second, you shouldn't be using onMouseOver=""
to attach event handlers (as that mixes JavaScript with HTML), so let's do away with it entirely. Replace your JavaScript with this:
$(document).ready(function() {
$("#that-area-down-there").mouseover(function() {
alert(2);
});
});
And your HTML with this:
<area shape="rect" coords="171,115,516,227" id="that-area-down-there" />
(Presumably you'll want to replace that id
with something more meaningful in context, of course.)
Solution 2
There are two resons why the code doesn't work. First of all you are missing a closing parenthesis in the call to the ready function, so you get a syntax error.
Second, the function that you define inside the function only exist in that scope. When you exit the function it doesn't exist any more.
Example:
$(document).ready(function(){
function myfunction(x) {
alert(x);
}
myfunction(42); // here it works
}
myfunction(-1); // here it doesn't exist
You can define the function globally from within the function like this:
$(document).ready(function(){
myfunction = function(x) {
alert(x);
}
});
Patrick Beardmore
Updated on December 27, 2021Comments
-
Patrick Beardmore over 2 years
I am trying to pass one variable to a jQuery function inline (i.e.: using an
onMouseOver="function();"
within the actual link (which is an area tag from an image map)).The function is only being called if I place it before the
$(document).ready(function(){
line, but doing this is causing all sorts of problems with jQuery.All I want is for a simple tag (such as
<area shape="circle" coords="357,138,17" onMouseOver="change('5');" id="5" />
to launch a function that is contained within the normal jQuery body of code.To illustrate the point, the following works:
<script type="text/javascript"> function myfunction(x) { alert(x); //Alerts 2 } </script> <img src="/shared_images/loading.gif" border="0" usemap="#Map"> <map name="Map"><area shape="rect" coords="171,115,516,227" onMouseOver="myfunction('2')"></map>
But the following doesn't
<script type="text/javascript" src="scripts/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ function myfunction(x) { alert(x); //Nothing happens } } </script> <img src="/shared_images/loading.gif" border="0" usemap="#Map"> <map name="Map"><area shape="rect" coords="171,115,516,227" onMouseOver="myfunction('2')"></map>
-
Patrick Beardmore almost 15 yearsThat's a great answer. You write about myfunction being a local variable. Could you explain how functions can be variables. Many thanks.
-
VoteyDisciple almost 15 yearsIn JavaScript, everything is a variable (or, using more traditional language, everything is data), including functions. When you write
function f() { };
you're essentially just using an alias forvar f = function() { };
This is what makes it possible to use "anonymous" functions in JavaScript. In other languages you might write eitherint x = 2; f(x);
or simplyf(2)
. In JavaScript, since functions are data just like everything else, you can write eithervar foo = function() {}; f(foo);
or justf(function() {});
Understanding this is the key to understanding JavaScript. -
Patrick Beardmore almost 15 yearsIn your second code example, will that function behave like a normal function throughout the rest of the document? Can it be called like a normal javascript function with onMouseOver="go();" Thanks