如何停止每次触发 onChange 的功能？

Question

我正在创建一个应用程序，允许教师为学生创建报告。我的current jsfiddle 显示了完整的代码，它具有我想要的基本功能。 但是，当用户从选项中进行选择时，printSelection 函数会运行 onChange，将选择添加到 collat​​edArray。

function printSelection(e) {
  collatedArray.push(e.value);
  console.log(collatedArray);
}

问题是，如果用户改变主意，它会将这两个选项都添加到最终报告中。

有没有办法运行这个函数，但前提是用户之前没有选择过它？

Answer 1

您的问题是您在每个 onchange 事件上推送数据，并且这样做只会在用户仅选择一次时起作用，但您可以通过使用简单的对象来保存您的数据和每个用户选择它时会覆盖正确的属性，这样您将只存储所需的输入，这是一个简单的示例，请注意，您可以像我一样使用事件委托，而不是为每个 <select> 元素添加事件侦听器，请避免使用内联 JS 它有很多缺点。

var inputsElement = document.querySelector("#dropdown-inputs"),
  inputs = {};

inputsElement.onchange = function(e) {
  // note that I'm not checking for the type of element
  // because I have just two <select> elements so it's
  // obvious that one of them is triggering the "onchange" event
  // so I set the right property name according to the select element
  inputs[e.target.name] = e.target.value;
  // just for debugging ;)
  console.clear();
  console.log(inputs);
}

<div id="dropdown-inputs">
  Width:
  <select name="width">
    <option value="0">0</option>
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="30">30</option>
  </select>
  Height:
  <select name="height">
    <option value="0">0</option>
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="30">30</option>
  </select>
</div>