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

我是JavaScript新手，尝试向console.log添加一个简单的事件侦听器，从脚本在页面加载时附加到div的输入中记录所选的颜色值

HTML:

JavaScript:

/*首先将输入颜色选择器添加为#myDiv的子项
带有可用颜色的数据列表*/
document.querySelector（“#myDiv”）.innerHTML+=`
#0275d8
#5cb85c
`;
/*正在尝试console.log颜色值
这是在输入中选择的*/
函数myFunction（事件）{
console.log（event.value）；
}
/*添加事件侦听器，以便在
在输入更改中，调用该函数*/
文件
.querySelector（“myInput”）
.addEventListener（“更改”，myFunction（e））；

这里有一个游戏

我不理解错误消息“ReferenceError:e未定义”

我是说，上面写着：

JavaScript异常“变量未定义”发生在 是某个引用的不存在变量

---

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

在eventListener声明中，javascript只需要函数名或匿名函数<代码>.addEventListener（“更改”，myFunction（e））无效。此外，您应该使用完整的

myFunction（event）

，而不仅仅是

myFunction（e）

。相反，你应该：

文档
.querySelector（“myInput”）
.addEventListener（“更改”，（）=>myFunction（事件））；

看看这个。

侦听器

应该是一个回调函数，第一个参数是

事件

，您可以显式调用它

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

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

addEventListener("change", myFunction);

/*首先将输入颜色选择器添加为#myDiv的子项
带有可用颜色的数据列表*/
document.querySelector（“#myDiv”）.innerHTML+=`
#0275d8
#5cb85c
`;
/*正在尝试console.log颜色值
这是在输入中选择的*/
函数myFunction（事件）{
日志（event.target.value）；
}
/*添加事件侦听器，以便在
在输入更改中，调用该函数*/
文件
.querySelector（“myInput”）
.addEventListener（“更改”，事件=>myFunction（事件））

两件事：

首先，在此处指定偶数处理程序时：

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

您不需要指定参数。事实上，此时您甚至没有调用
myFunction
函数。您只是告诉侦听器哪个函数负责处理事件。你只需要写：

.addEventListener("change", myFunction);

事件侦听器是在实际触发事件后传递“事件”对象的对象

其次，在
myFunction
中，需要通过以下两种方式之一访问值：

console.log(event.currentTarget.value);

或

一个更简单的方法就是这样。
请注意oninput=“console.log（this.value）”

如果您想根据document.getElementById的id查找queryselector，那么您也不正确地使用了queryselector。无论如何，我希望这能有所帮助


document.querySelector（“div”）.innerHTML+=`
#0275d8
#5cb85c
`;
这返回未定义的结果。@norcaljohnny之前只是向OP演示如何进入
myFunction
console.log(this.value);