Question

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

2020-12-03

1011

javascript html

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

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

这里有一个 JSFiddle 来玩。

我不明白错误消息 “<a class='gotoLine' href='#62:1'>62:1</a> ReferenceError: e 未定义”

我的意思是，它说 MDN 上：

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

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

Answer 1

两件事：

首先，当您在此处指定事件处理程序时：

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

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

.addEventListener("change", myFunction);

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

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

console.log(event.currentTarget.value);

或

console.log(this.value);

Answer 2

在 eventListener 声明中，javascript 只需要函数名称或匿名函数。 .addEventListener("change", myFunction(e)); 无效。此外，您应该使用完整的 myFunction(event) ，而不仅仅是 myFunction(e) 。您应该这样做：

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

Answer 3

一个更简单的方法是这样的。注意 oninput="console.log(this.value)"

如果您想要根据 id 找到它，那么您使用 queryselector 的方式也不恰当，document.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>