复选框和表单提交不适用于 onChange 方法 Javascript答案

【问题标题】：Checkbox and form submit don't work well with onChange method Javascript复选框和表单提交不适用于 onChange 方法 Javascript
【发布时间】：2015-05-12 20:56:21
【问题描述】：

我的脚本中有一个字符串数组，我有 2 个函数，一个是按最大和最小长度过滤字符串，一个是根据字符串所具有的字符排除某些字符串的方法。这两种方法不能很好地结合使用，并且当我取消选中它们时它们不会显示适当的数组。

这是我的代码：

<div id="demo"> </div>
<div class="item">
  <form id="aForm" onchange="filter()">
    <input type="checkbox" id="A" value="A">Exclude words with 'A'
    <br>
    <input type="checkbox" id="E" value="E">Exclude words with 'E'
    <br>
    <input type="checkbox" id="O" value="O">Exclude words with 'O'
    <br>
  </form>
</div>
<div class="item" id="length">
  <form id="oForm">
    <input type="text" name="minLength" size="2" />Minimum Lenght
    <br>
    <input type="text" name="maxLength" size="2" />Maximum Length
    <br>
    <input type="button" value="Update" onclick="updateLength()">
  </form>
</div>

这里有我的脚本：

 <script type="text/javascript">
  var animals = ["Bear", "Mouse", "Cat", "Tiger", "Lion"];

  function filter() {
    var a = document.getElementById('A').checked,
      e = document.getElementById('E').checked,
      o = document.getElementById('O').checked,
      result2; //make a copy

    var copy2 = document.getElementById("demo").innerHTML;
    var array = copy2.split(" ");

    result2 = array.filter(function(value) {
      value = value.toLowerCase();
      return (!a || value.indexOf('a') == -1) && (!e || value.indexOf('e') == -1) && (!o || value.indexOf('o') == -1);
    })
    document.getElementById("demo").innerHTML = result2;
  }
  filter();

  function updateLength() {
    minLength = oForm.elements["minLength"].value;
    maxLength = oForm.elements["maxLength"].value;
    var result = [];
    var copy2 = document.getElementById("demo").innerHTML;
    var array = copy2.split(" ");
    for (var i in array) {

      if (minLength <= array[i].length && array[i].length <= maxLength) {
        result += " " + array[i];
      }
      document.getElementById("demo").innerHTML = result;
    }
  }
  updateLength();
</script>

【问题讨论】：

为什么表格里有表格？
These two methods don't work well together 。 . .你可以说得更详细点吗？你看到什么问题？控制台中是否有任何错误？你希望看到什么你不是？
当我检查以排除带有“E”的字符串时，我得到了适当的字符串，然后当我按值过滤时，即使有字符串，我也没有得到任何字符串

标签： javascript html methods onchange

【解决方案1】：

将updateLength() 函数放在filter() 函数之外，并将onchange 侦听器放在所有输入上，而不是表单上。表单本身的状态没有改变，输入是。

【讨论】：

udateLength 和过滤器分开