eventlistener without anonymous function

Question

Attempting to use pure JavaScript to find the length of text in a textbox. Why is it that the verbose method of:

var first_name = document.getElementById("firstname");
first_name.addEventListener("change", howLong(first_name));

function howLong(first_name) {
  var p = first_name.value.length;
  alert("Length of input is " + p);
}

<form>
  <input id="firstname" type="text" />
  <input type="submit" /> </form>

does not allow the value to be accessed (always zero), while the use of anonymous function

var first_name = document.getElementById("firstname");
  first_name.addEventListener("change", function(){
  var p = first_name.value.length;
  alert("Length of input is "+p);
  } );

<form>
<input id="firstname" type="text"/>
<input type="submit"/> </form>

Works correctly?

because the first one is calling the method and storing what it returns to the event handler. So your code is really `howLong(first_name); first_name.addEventListener("change", undefined);` Did you not notice the alert when the page loaded and you did not change anything? A lightbulb should have gone off. :) — epascarello, Jan 10 '18 at 15:43
@epascarello it did, hence the question, so I could get a definitive answer, and not merely guess at such. — Stumbler, Jan 10 '18 at 16:11

mdatsev · Accepted Answer · 2018-01-10T15:45:52.507

You want yo pass the function itself howLong and not call the function and pass the result. Working code:

var first_name = document.getElementById("firstname");
first_name.addEventListener("change", howLong); // instead of howLong(first_name)

function howLong() {
  var p = first_name.value.length;
  alert("Length of input is " + p);
}

<form>
  <input id="firstname" type="text" />
  <input type="submit" /> </form>

As @Andreas stated it would be better to use this in the function and not rely on a global variable since this gives you better flexibility (for example you can use this same function for other inputs):

var first_name = document.getElementById("firstname");
first_name.addEventListener("change", howLong); // instead of howLong(first_name)

function howLong() {
  
  var p = this.value.length;
  alert("Length of input is " + p);
}

<form>
  <input id="firstname" type="text" />
  <input type="submit" /> </form>

Yep, this is a good advice but I tried to just address the problem at hand. — mdatsev, Jan 10 '18 at 15:45

score 1 · Answer 2 · answered Jan 10 '18 at 15:40

1

You are passing the return value of howLong(first_name) to addEventListener rather than the function itself. One possible fix:

first_name.addEventListener("change", () => howLong(first_name));

answered Jan 10 '18 at 15:40

Jackson Lenhart

630
3
7
19

score 0 · Answer 3 · answered Jan 10 '18 at 15:57

In your first example, howLong function is being executed at runtime and therefore returns the value 0 because nothing has been typed into the input yet.
What you need to do is to pass in the function itself:

var first_name = document.getElementById("firstname");
    first_name.addEventListener("change", () => howLong(first_name));

function howLong(first_name) {
  var p = first_name.value.length;
  alert("Length of input is " + p);
}

<form>
  <input id="firstname" type="text" />
  <input type="submit" /> 
</form>

eventlistener without anonymous function

3 Answers3