How to programattically change an inputs onblur?

Question

I am trying to change the value of the onblur attribute of a text input after the page has finished loading.

When I do the following, it simply fires the function:

ip.onblur = stopCalcUpInt(this,10);

When I do the following, I have success:

ip.onblur = function onblur(event){stopCalcUpInt(this,10);}

Unfortunately, the whole point of this is to be able to dynamically set the second parameter for stopCalcUpInt(). If I hard code a value for it... it works fine... but any attempts to pass varibles to this fails... instead of putting the value of the variable as the second param it just puts the plain text of the variable name itself. Here is ideally what I am TRYING to do:

ip.onblur = function onblur(event){stopCalcUpInt(this,this.value);}

In this example, when I alert the ip.onblur I get:

Answer 1

It depends what this is intended to refer to. In an event handler this refers to the element on which the event is being handled. If that's what you want then your code looks good as written; this will point to ip.

If you intend this to refer to the this from outside the event handler and not ip then try this:

var self = this;
ip.onblur = function(event) { stopCalcUpInt(self, self.value); };

Answer 2

ip.onblur = function() {stopCalcUpInt(this,this.value);}

Answer 3

ip.onblur is an event handler... i.e. it's a function

Now, when you alert a function, FF will show you the source code for that function (if it's user defined).

That is why you're seeing the plain text of the variable name.

For an event handler, this is the element that is currently handling the event. So, if you're setting the onblur handler of an input box, you will have access to the contents of that input box.

The code sample that you provided:

 ip.onblur = function onblur(event){stopCalcUpInt(this,this.value);}

should work correctly. Try

 ip.onblur = function onblur(event){alert(this.value); stopCalcUpInt(this,this.value);}

if you want to be sure

Answer 4

Is stopCalcUpInt expecting a number in the second parameter? The value attribute will return a String, while in your hardcoded example you're passing a number type. Try this:

ip.onblur = function onblur(event){stopCalcUpInt(this,this.value * 1);}

As explained in QuirksMode:

Since multiplying assumes numbers, JavaScript makes the string a number, if possible.

Answer 5

The answer to getting this to work was super easy, yet not overly obvious. Instead of:

ip.onblur = function onblur(event){stopCalcUpInt(this,this.value);}

I did this:

ip.setAttribute('onblur','stopCalcUpInt(this,\'' + ip.value + '\');');

Works perfectly... no more banging my head against the wall! Yay!