passing arguments into functions

[midnite]

consider

<span id="mySpan" onmouseover="changeBg(this)">change me =P</span><script>function changeBg(obj){  obj.style.backgroundColor = "#FF0000";}</script>

if i want to separate JS from HTML totally, i can do something like the following:

<span id="mySpan">change me =P</span><script>document.getElementById("mySpan").onmouseover = changeBg;function changeBg(){  this.style.backgroundColor = "#FF0000";}</script>

when i want to pass some parameters into the function i can write in this way:

<span id="mySpan" onmouseover="five(5)">give me 5 XDD</span><script>function five(num){  alert(num);}</script>

but, what if i want to BOTH separate JS from HTML totally AND pass some parameters into the function?conceptually, it should be: [but it does NOT work!!]

<span id="mySpan">give me 5 XDD</span><script>document.getElementById("mySpan").onmouseover = five(5);function five(num){  alert(num);}</script>

[jesh]

document.getElementById("mySpan").onmouseover = function() { five(5); }

[Ingolme]

Edited.The above answer is the solution

[killboy]

I've got a question:Would that syntaxis (the first one) work if he firstly defines the function??I mean:

<script>function five(num){  alert(num);}document.getElementById("mySpan").onmouseover = five(5);</script><span id="mySpan">give me 5 xDD</span>

[killboy]

Edit: it didn't work.Solution is jesh's answer...

[Reg Edit]

You can use addEventListener/attachEvent to refer to a named function.EDIT: but that's only of incidental interest as you then can't pass arguments which was asked for here.

[midnite]

You can use addEventListener/attachEvent to refer to a named function.EDIT: but that's only of incidental interest as you then can't pass arguments which was asked for here.

It allows adding more than a single handler for an event.

that's cool!But, i dont get it with useCapture. Can anyone give me some examples?

[Reg Edit]

that's cool!But, i dont get it with useCapture. Can anyone give me some examples?

Well, I wouldn't get too excited about useCapture, because, did you notice, the IE implementation doesn't have a useCapture argument... so I doubt if you'll find many examples while IE is a major browser meaning people need their sites to work in IE. But the DOM Level 3 Events link sheds some light, depicting the DOM event flow, including the capture phase.

[justsomeguy]

I've got a question:Would that syntaxis (the first one) work if he firstly defines the function??I mean:

<script>function five(num){  alert(num);}document.getElementById("mySpan").onmouseover = five(5);</script><span id="mySpan">give me 5</span>

Yes, it will work, but not the way you're thinking. When you put the parens after the function name it executes the function. Normally when you use syntax like this:document.getElementById("mySpan").onmouseover = five;You're just assigning a reference to the five function to the onmouseover event. When you do this:document.getElementById("mySpan").onmouseover = five(5);You are executing the function and assigning the return value to the onmouseover event. The example function doesn't return a value at all, much less a function reference, so it's not going to work in this case. But if the function that you want to run will return a function reference then there's no problem calling one function to return another one, as long as the argument on the right side of the equal sign evaluates to a function reference.

[midnite]

??

<span id="mySpan">give me 5 XDD</span><script>document.getElementById("mySpan").onmouseover = five(5);function five2(num) {  alert(num);}function five(num) {  return five2(num);}</script>

??

<span id="mySpan">give me 5 XDD</span><script>document.getElementById("mySpan").onmouseover = five(5);function five(num) {  return five;}</script>

??both my scripts do not work...do you have any ideas?thanks =)

[Ingolme]

??

<span id="mySpan">give me 5 xDD</span><script>document.getElementById("mySpan").onmouseover = five(5);function five2(num) {  alert(num);}function five(num) {  return five2(num);}</script>

??

<span id="mySpan">give me 5 xDD</span><script>document.getElementById("mySpan").onmouseover = five(5);function five(num) {  return five;}</script>

??both my scripts do not work...do you have any ideas?thanks =)

None of those scripts make any sense to me...In the first script:You're assingning the return value of the function five() to the onmouseover attribute of the object. You've given it the parameter 5, and it's supposed to return the value of five2() with 5 is passed to it. However, five2() does not return anything, instead it alerts (num). Therefore this script does nothing.In the second script:Again you're assigning the return value of function five() to the onmouseover attribute of the object, which means it's not triggered by an event either.You should have taken example from the previous posts.try:<span id="mySpan">give me 5 xDD</span><script type="text/javascript">document.getElementById("mySpan").onmouseover = function() { five(5); };function five(num) { alert(num);}</script>

[jesh]

If you want to do what justsomeguy suggested (@justsomeguy, I like the idea, I'll have to play around with it more), you could do something like this:

var somevariable = "somevalue";function five(num){	return function() { someotherFunction(num, somevariable); }}function someotherFunction(num, message){	alert("message=" + message + " and num=" + num);}document.onclick = five(104);

[justsomeguy]

You would use something like what I was suggesting if the function you want to run depends on something else (the parameter).

function func1(){  alert ("func1");}function func2(){  alert("func2");}function func3(){  alert("func3");}function def(){  alert("def");}function get_callback(nr){  switch(nr)  {	case 1:	  return func1;	  break;	case 2:	  return func2;	  break;	case 3:	  return func3;	  break; 	default:	  return def;  }}el1.onclick = get_callback(1);el2.onclick = get_callback(2);el3.onclick = get_callback(3);el4.onclick = get_callback(4); // will return the default

But notice that the switch statement returns a reference to the function (using just the function name), it doesn't have the parens there because we don't want to run the function at this point, just return a reference to it so that it can be run later.