Alternative to anonymous functions in JavaScript

Question

document.addEventListener('DOMContentLoaded', function() {
  let input = document.querySelector('input');
  input.addEventListener('keyup', function(event) {
    let name = document.querySelector('#name');
    if (input.value) {
      name.innerHTML = `hello, ${input.value}`;
    } else {
      name.innerHTML = 'hello, whoever you are';
    }
  });
});

<form>
  <input autocomplete="off" autofocus placeholder="Name" type="text">
</form>
<p id="name"></p>

In the above HTML page, they have used anonymous functions to look for keyup event and greet with the word we have typed/input.

How do I achieve this without using anonymous functions? So far I have tried modifying the script, but it fails to identify keyup event

function greet() {
  let name = document.querySelector("#name");
  let event = document.querySelector("input");
  if (event.value) {
    name.innerHTML = `HELLO ${event.value}`
  } else {
    name.innerHTML = `HELLO person`
  }
}

function listen() {
  let input = document.querySelector("input");
  input.addEventListener("keyup", greet);
}

document.addEventListener("DOMContentLoaded", listen);

[it works](https://jsbin.com/socahok/edit?html,js,output) if you include your HTML there and void putting ` — VLAZ, Mar 10 '21 at 07:57
@VLAZ - Very true! But I suspect they want to reuse it or something -- e.g., they don't just want to name the function, but use it on multiple inputs. (But doing that will likely require multiple `#name` elements as well...) Hard to say though. — T.J. Crowder, Mar 10 '21 at 08:00
@T.J.Crowder perhaps, however "it fails to identify keyup event" is not the real problem here. — VLAZ, Mar 10 '21 at 08:02
@VLAZ yes, Thanks for pointing out the bug. Also as T.J.Crowder points out, I would appreciate if I can achieve without re-using querySelector("input") again. — C--, Mar 10 '21 at 08:07

baldrs · Accepted Answer · 2021-03-10T08:01:59.963

4

You have to pass event object to your event handler functions instead of trying to read arbitrary DOM elements, like so:

function greet(event)
{
   let name = document.querySelector("#name");

   if (event.target.value) {
         name.innerHTML = `HELLO ${event.target.value}`
   } else {
         name.innerHTML = `HELLO person`
   }
}

function listen()
{
   let input = document.querySelector("input");
   input.addEventListener("keyup", greet);
}

document.addEventListener("DOMContentLoaded", listen);

<div id="name">HELLO person</div>
<div>
  <input type="text" name="name" />
</div>

edited Mar 10 '21 at 08:01

answered Mar 10 '21 at 07:56

baldrs

2,132
25
34

1

I think you've hit on the key bit, it wasn't really about naming the function. Anyway, I recommend doing a Stack Snippet, particularly since the OP did. – T.J. Crowder Mar 10 '21 at 07:59
@T.J.Crowder oh, that's a great idea! Added a snippet – baldrs Mar 10 '21 at 08:02
@baldrs Perfect. I just didn't know we could use event.target.value :) – C-- Mar 10 '21 at 08:08
@baldrs. It's interesting how a function is able to get the event value even though we didn't pass its value as an argument when callling Inside EventListener – C-- Mar 10 '21 at 08:11
1

@user8570772 it's passed by the DOM Event API. Note that you pass your listener function as a callback(that is, without arguments, as value), and then, when an event is fired, the function you've passed gets invoked with Event object. You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/Events – baldrs Mar 10 '21 at 08:17
2

@user8570772 [What exactly is the parameter e (event) and why pass it to JavaScript functions?](https://stackoverflow.com/q/35936365) | [Where does the 'event' param come from in javascript event handlers?](https://stackoverflow.com/q/9925947) – VLAZ Mar 10 '21 at 08:18
@user8570772 - Note that if you are hooking the event on something that can contain other elements (`input` elements can't, but `button` elements can for instance), you'll usually want `event.currentTarget.value` rather than `event.target.value`. `currentTarget` is the element you hooked the event on. `target` is the element being targeted by the event, which could be a descendant (the `span` in ``, for instance). – T.J. Crowder Mar 10 '21 at 09:19

Alternative to anonymous functions in JavaScript

1 Answers1