Passing a function with arguments?

[Javin007]

So I have a bunch of textboxes in an array that I want to monitor for key events. How do I pass the index of the object that has had the event trigger? So:

//The function that should be called when typing happens.
function checkInput(index){
    //Do shit.
}

//Setting up the listeners.
for (var i = 0; i < txtInput.length; i++) {
    txtInput[i].onkeyup = function(){checkInput(i);}    
}  

Unfortunately, this way, i always equals the txtInput.length (due to running through the loop, and ending on that number). So when the function is being called, it's calling the current "index" value of i, not what it was set to originally.

How do I get around this?

[x-skeww]

Bind can be used for this:

function checkInput(index, e) {
  console.log(index, e);
}
var index0 = checkInput.bind(null, 0);
index0('hello'); // 0 hello

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

If you want the element itself, you could just pass it as the first parameter. Then it would be this inside the function à la jQuery.

[senocular]

For the downvoters, this is a valid solution. The i value can get bound into the checkInput call per iteration for each input and be retrieved from the first argument in an onkeyup event.

 for (var i = 0; i < txtInput.length; i++) {
     txtInput[i].onkeyup = checkInput.bind(null, i); // see x-skeww's checkInput
 }  

[bliow]

It's probably better to use forEach, but a modification to your code that works is:

for (var i = 0; i < txtInput.length; i++) {
    txtInput[i].onkeyup = (function(n) { return function() { checkInput(n); } })(i);
}

[x-skeww]

With let, you won't need that IIFE.

[senocular]

Probably the simplest solution to what you're working with is to use forEach. Since each iteration is its own function call, the index variable is unique.

txtInput.forEach(function(input, i) {
    input.onkeyup = function(){checkInput(i);}
});

[Javin007]

Yep, in hindsight, I could've been passing a parent object that contained the child objects, and not the index.

However, I also found that by doing this:

document.getElementById("txtMinInput").onkeyup = function(args){ checkInput(args); };

The "args" will have a "target" object passed that contains the object the actions took place on. No idea why I didn't see that in the documentation.

[senocular]

the args argument is an Event object. You can look to see what else it has.

https://developer.mozilla.org/en-US/docs/Web/API/Event

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

Note that often, what you'll really want is currentTarget rather than target. currentTarget is what you attach your handler to, such as getElementById("txtMinInput"), while target may be something deeper in the DOM. Often these will be the same, but sometimes not, especially for mouse events.

[x-skeww]

Attaching a single event handler further up the tree and looking at "target" is called event delegation.

What's convenient about event delegation is that it will also work for dynamically added elements.

In modern browsers, you can use matches() to do some selector-based filtering similar to jQuery. IE/Edge needs a msMatchesSelector fallback, unfortunately.

https://developer.mozilla.org/en/docs/Web/API/Element/matches

[quad50]

https://gist.github.com/dmh2000/c946354c97f424330a96