Generic OnChange Function for Dropdown

Question

I have multiple select elements that need to execute a javascript function when changed. I would like to make a generic function, so I can set multiple onchange methods to this same function.

This works and does exactly what I want:

myselect.onchange = function() {
   *some code*
}

However, using the exact same code but using a named function declared outside of the onchange event as follows, does not:

function myfunc(){
   *some code*
}

myselect.onchange = myfunc();

How can I create a named function and set my onchange methods to it? Is this possible? There is so much repeated code otherwise :(

EDIT: In my example I didn't have my function accepting parameters. To make this useful for my multiple selects I need to pass it a parameter. Without using parenthesis how can I do that?

Answer 1

Functions in javascript are actually first class citizens, which means they can be assigned to variables, can be passed around as arguments, and can even be assigned as return values of other functions .

So when you do:

myselect.onchange = myfunc();

You are setting the onchange property of myselect to hold the return values of myfunc itself.

When you do:

myselect.onchange = myfunc;

You are setting the onchange property of myselect to reference the myfunc function itself.

To answer your latest edit to the post, you can add arguments to the function when you first declared it, and still pass your function around. For example:

myfunc(arg1, arg2) {
  *some code*
}

myselect.onchange = myfunc;

Answer 2

In the expression myselect.onchange = myfunc; right side must be Function object.
It is OK to write myselect.onchange = myfunc('something'); provided myfunc returns function . Something like this.

 var select1 = document.getElementById('sel1'); var select2 = document.getElementById('sel2'); select1.onchange = myfunc('Hello '); select2.onchange = myfunc('Good Bye '); function myfunc(greet) { return function() { console.log(greet + this.value); }; } 

 <select id="sel1"> <option>One</option> <option>Two</option> </select> <select id="sel2"> <option>Three</option> <option>Four</option> </select> 

EDIT: As Function s are First-class objects they can be function parameters . Something like this.

 var select1 = document.getElementById('sel1'); var select2 = document.getElementById('sel2'); select1.onchange = myfunc(foo); select2.onchange = myfunc(bar); function myfunc(callback) { return function() { callback(this.value); }; } function foo(val) { console.log('Hello from foo ' + val); } function bar(val) { console.log('Hello from bar ' + val); } 

 <select id="sel1"> <option>One</option> <option>Two</option> </select> <select id="sel2"> <option>Three</option> <option>Four</option> </select>