Question

我正在创建一个应用程序，允许老师为学生创建报告。我的current jsfiddle显示了完整的代码，并且具有我想要的基本功能。但是，此刻，当用户从选项中进行选择时，printSelection函数将运行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的功能？

1 个答案: