如何将输入变成事件侦听器

Question

我只想将下面的JavaScript代码转换为事件侦听器：

function plot() {
  var f = document.querySelector("#function").value;
  var color = document.querySelector("#color").value;
  var derivative = document.querySelector("#der").value;

  parameters.data[0].fn = f;
  parameters.data[0].color = color;
  parameters.data[0].derivative.fn = derivative;

  functionPlot(parameters);
}

为了澄清更多，查询：#der，#color和#function是html输入，我想使用addEventListener而不是.value。

感谢

Answer 1

迭代每个选择器，将change侦听器添加到每个元素，其中plot是侦听器：

['function', 'color', 'der'].forEach((id) => {
  document.getElementById(id).addEventListener('change', plot);
});

function plot() {
  var f = document.querySelector("#function").value;
  var color = document.querySelector("#color").value;
  var derivative = document.querySelector("#der").value;

  parameters.data[0].fn = f;
  parameters.data[0].color = color;
  parameters.data[0].derivative.fn = derivative;

  functionPlot(parameters);
}