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

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

html javascript

Sean McCarthy · 技术社区 · 4 年前

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 回复 | 直到 4 年前

nehtron 4 年前

两件事:

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

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

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

.addEventListener("change", myFunction);

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

console.log(event.currentTarget.value);

console.log(this.value);

Lemondoge 4 年前

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

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

norcal johnny 4 年前

一个更简单的方法是这样。注意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 4 年前

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

4 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

5 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

5 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

5 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

5 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

5 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

5 月前