CODEWITHSUNDEEP
javascripthtml
Sean McCarthy
Sean McCarthy

Reputation: 5568

How to pass value of chosen input to eventListener function

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:

<html>
  <div id="myDiv">
  </div>
</html>

JavaScript:

/* First add an input color selector as a child of #myDiv 
with a datalist of available colors */
document.querySelector("#myDiv").innerHTML += `
  <input id="myInput" type="color" list="presetColors" 
       colorpick-eyedropper-active="false">

  <datalist id="presetColors">
    <option>#0275d8</option>
    <option>#5cb85c</option>
  </datalist>
`;

/* 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 "<a class='gotoLine' href='#62:1'>62:1</a> 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?

Upvotes: 2

Views: 1165

Answers (4)

hgb123
hgb123

Reputation: 14891

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 += `
  <input id="myInput" type="color" list="presetColors" 
       colorpick-eyedropper-active="false">

  <datalist id="presetColors">
    <option value="#0275d8">#0275d8</option>
    <option value="#5cb85c">#5cb85c</option>
  </datalist>
`;

/* 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));
<html>
<div id="myDiv">
</div>

</html>

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

Upvotes: 1

norcal johnny
norcal johnny

Reputation: 2115

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 += `
  <input id="myInput" type="color" list="presetColors" colorpick-eyedropper-active="false" oninput="console.log(this.value)">
  <datalist id="presetColors" >
    <option>#0275d8</option>
    <option>#5cb85c</option>
  </datalist>
`;
<div><div>

Upvotes: 1

nehtron
nehtron

Reputation: 148

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);

Upvotes: 1

Lemondoge
Lemondoge

Reputation: 989

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));

Upvotes: 1

Related Questions