代码之家 › 专栏 › 技术社区 › Sean McCarthy

如何将所选输入的值传递给eventListener函数

html javascript

Sean McCarthy · 技术社区 · 3 年前

HTML格式:

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

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

这是一个 JSFiddle

我不明白错误信息 "<a class='gotoLine' href='#62:1'>62:1</a> ReferenceError: e is not defined"

我是说,上面写着 here on MDN :

出现“变量未定义”的JavaScript异常

那么如何将输入值传递给函数呢?

4 回复 | 直到 3 年前

nehtron 3 年前

两件事:

首先,在此处指定偶数处理程序时:

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

myFunction 在这一点上起作用。您只是告诉侦听器哪个函数负责处理事件。你只需写下:

.addEventListener("change", myFunction);

第二,在 我的功能 ,您需要通过以下两种方式之一访问该值:

console.log(event.currentTarget.value);

console.log(this.value);

Lemondoge 3 年前

在eventListener声明中,javascript只需要函数名或匿名函数。 .addEventListener("change", myFunction(e)); myFunction(event) myFunction(e) . 相反,您应该:

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

norcal johnny 3 年前

一个更简单的方法是这样。注意oninput=“控制台.log(这个值)"

如果您想根据id找到queryselector,那么您也不正确地使用了queryselector文档.getElementById会有效果的。无论如何,希望这能有所帮助。

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>

hgb123 3 年前

doc for "The event listener callback" . 这个 listener event 作为第一个参数,可以显式地调用

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

或者只传递函数,就像上面实现的那样

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>

option ,必须指定每个 选项 和 value 属性,然后用 event.target.value event.value