CODEWITHSUNDEEP
javascript
Pratik Patel
Pratik Patel

Reputation: 1345

Javascript : Assign a function and pass parameter at the same time

I have html buttons "classA","classB" and "classC" to which I assign the onclick handler function as follows..

var classA = document.getElementById('classA');
classA.onclick = filterByClassA;

var classB = document.getElementById('classB');
classB.onclick = filterByClassB;

var classC = document.getElementById('classC');
classC.onclick = filterByClassC;

These 3 functions do the same thing, only difference being the class. So, can I have a single function assigned to these buttons, called with different parameters for each button. Something like below

var classA = document.getElementById('classA');
classA.onclick = filterByClass('classA');

var classB = document.getElementById('classB');
classB.onclick = filterByClass('classB');

var classC = document.getElementById('classC');
classC.onclick = filterByClass('classC');

I know this is a function call and not assignment and this is wrong but is there a way I can achieve this i.e. assign a function and pass parameter at the same time but not call it?

Upvotes: 1

Views: 1106

Answers (3)

user405398
user405398

Reputation:

Bind can help you out here: Its called partial application.

Bind Syntax

fun.bind(thisArg[, arg1[, arg2[, ...]]])

  • 1st param is scope of the function when it is called.
  • From 2nd you can pass any number of agruments. See the below code to know how it works.

Code:

var classA = document.getElementById('classA');
classA.onclick = filterByClass.bind(classA, 'classA');

var classB = document.getElementById('classB');
classB.onclick = filterByClass.bind(classB, 'classB');

var classC = document.getElementById('classC');
classC.onclick = filterByClass.bind(classC, 'classC');

function filterByClass(className, eventObject) {
  console.log(this, className, eventObject);
}

Update:

Check out the Compatibility section in the above MDN link. You may need to use it, if you are going to use bind in non modern browsers.

Upvotes: 3

cocco
cocco

Reputation: 16706

i always try to keep the code as short as possible

so if your buttons are inside a container you can do that.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>atest</title>
<script>
window.onload=function(){
 var c=document.getElementsByTagName('div')[0].childNodes,
 l=c.length,
 filterByClass=function(){
  console.log(this.id);//this.id is the classA or whatever
 };
 while(l--){
  c[l].onclick=filterByClass;
 }
}
</script>
</head>
<body>
<div>
 <button id="classA">A</button>
 <button id="classB">B</button>
 <button id="classC">C</button>
</div>
</body>
</html>

in this case

document.getElementsByTagName('div')[0]

returns the first div in the document

childNodes

give u the list of the buttons inside that div

the while function adds the onclick event with your function 'filterByClass'

inside filterByClass u can access the element by this and so return it's id with this.id

Upvotes: 1

Metalstorm
Metalstorm

Reputation: 3242

function filterByClass(className)
{

    return function()
    {
        // Do something with className
        console.log(className);
    }
}

Upvotes: 6

Related Questions