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

Question

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

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>

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

How do I stop the function triggering onChange every time?

javascript

function

select

onchange

options