How to pass value of chosen input to eventListener function

Question

I'm brand new to JavaScript, trying to add a simple event listener, to console.log a chosen color value from an input that the script appends to a div on page-load.

HTML:

JavaScript:

/* First add an input color selector as a child of #myDiv 
with a datalist of available colors */
document.querySelector("#myDiv").innerHTML += `
  

  
    
    
  
`;

/* Trying to console.log the color value 
that was chosen in the input */
function myFunction(event) {
  console.log(event.value);
}

/* Adding an event listener so that when the color 
in the input changes, the function is called */
document
  .querySelector("#myInput")
  .addEventListener("change", myFunction(e));

Here's a JSFiddle to play with.

I don't understand the error message "62:1 ReferenceError: e is not defined"

I mean, it says here on MDN:

The JavaScript exception "variable is not defined" occurs when there is a non-existent variable referenced somewhere.

So how to I pass the value of the input to the function?

user_14538881 · Answer

In eventListener declarations, javascript expects either just the function name or an anonymous function. .addEventListener("change", myFunction(e)); is not valid. In addition, you should use the full myFunction(event) rather than just myFunction(e). Instead you should do:

document
  .querySelector("#myInput")
  .addEventListener("change", () => myFunction(event));

user_6655160 · Answer

Have a look at this doc for "The event listener callback". The listener should be a callback function with the event as first parameter, you could explicitly call that

addEventListener("change", event => myFunction(event));

or just pass the function, as you implemented above

addEventListener("change", myFunction);

/* First add an input color selector as a child of #myDiv 
with a datalist of available colors */
document.querySelector("#myDiv").innerHTML += `
  

  
    
    
  
`;

/* Trying to console.log the color value 
that was chosen in the input */
function myFunction(event) {
  console.log(event.target.value);
}

/* Adding an event listener so that when the color 
in the input changes, the function is called */
document
  .querySelector("#myInput")
  .addEventListener("change", event => myFunction(event));

Moreover, to get the value for option, you must specify each option with the value attribute, and grab it with event.target.value, rather than event.value

user_11715810 · Answer

Two things:

First, when you specify the even handler here:

.addEventListener("change", myFunction(e));

You do not need to specify the parameters. In fact, you are not even calling the myFunction function at this point at all. You are just telling the listener which function is responsible for handling the event. You simply need to write:

.addEventListener("change", myFunction);

The event listener is what passes the "event" object after the event is actually fired.

Second, in myFunction, you need to access the value in one of two ways:

console.log(event.currentTarget.value);

or

console.log(this.value);

user_6192332 · Answer

A much more simple approach would be this. Notice the oninput="console.log(this.value)"

You were also using queryselector improperly if you wanted to find it based on id the document.getElementById would have worked. Anyhow hope this helps.

document.querySelector("div").innerHTML += `
  
  
    
    
  
`;

How to pass value of chosen input to eventListener function

4 Answers