simplifying variable.handler = function {}

Question

I'm brushing up on my JS, and I don't know how to ask this, exactly.

I have this:

text_area.onkeyup = function() {
  var text_length    = this.value.length;
  var text_remaining = text_max - text_length;

  feed_back.innerHTML = "<strong>" + text_remaining + "</strong> charactres remaining";
}

It works. However, should I be able to take the function and pull it out to something like this?

function countDown() {
  var text_length    = this.value.length;
  var text_remaining = text_max - text_length;

  feed_back.innerHTML = "<strong>" + text_remaining + "</strong> charactres remaining";
}

and just call the function by its name?

text_area.onkeyup = countDown();

This has never worked for me, across multiple projects.

Should it? Why doesn't it?

Mike Christensen · Accepted Answer · 2013-03-27 22:20:08Z

4

You'll have to use:

text_area.onkeyup = countDown;

Without the parenthesis.

countDown is a reference to the actual function object countDown. It's simply a reference, and the function won't be called or executed.

countDown() actually calls the function, and evaluates to whatever it returns.

answered Mar 27, 2013 at 22:20

Mike Christensen

91.8k52 gold badges223 silver badges349 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

p.s.w.g · Accepted Answer · 2013-03-27 22:19:59Z

3

It doesn't work because () actually calls the function -- effectively setting text_area.onkeyup to the return value of countDown rather than the function itself.

Try this instead:

text_area.onkeyup = countDown;

answered Mar 27, 2013 at 22:19

p.s.w.g

150k31 gold badges307 silver badges339 bronze badges

Comments

Coin_op · Accepted Answer · 2013-03-29 19:29:31Z

2

The problem is that you're executing the function during the assignment, so the return value from the function becomes attached to the event. Instead you should attach a reference:

text_area.onkeyup = countDown

Or if countdown has parameters you want to pass with it then you can use a function to make sure they don't get lost. Something like this:

text_area.onkeyup = function(){ countDown(paremeter1, paremeter2); }

edited Mar 29, 2013 at 19:29

answered Mar 27, 2013 at 22:21

Coin_op

10.8k4 gold badges38 silver badges47 bronze badges

1 Comment

nobrandheroes Over a year ago

Thanks for pointing out the function() {...} part. That's really useful.

zerkms · Accepted Answer · 2013-03-27 22:19:58Z

2

It shouldn't because you're assigning the result of a function call instead of a function reference. Should be:

text_area.onkeyup = countDown;

answered Mar 27, 2013 at 22:19

zerkms

256k73 gold badges447 silver badges551 bronze badges

Collectives™ on Stack Overflow

simplifying variable.handler = function {}

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related