javascript - 如何在更改值而不是单击按钮时运行我的函数？

Question

我有多个文本框，现在我想在一个文本框中找到它们的最小值作为结果。

当我单击按钮时我有这个工作，我需要在任何文本框中进行更改时更新它，尽管不使用 onclick 事件。我该怎么做？

function minimum() {
  var a = document.getElementById("1").value;
  var b = document.getElementById("2").value;
  var c = document.getElementById("3").value;
  var d = document.getElementById("4").value;
  var m = Math.min(a, b, c, d);
  document.getElementById("5").value = m;
}

<input type="text" class="a1" id="1" value="1" />
<input type="text" class="a1" id="2" value="2" />
<input type="text" class="a1" id="3" value="3" />
<input type="text" class="a1" id="4" value="4" />
<input type="button" onclick="minimum()" value="MIN" />

<br /><br />
<input type="text" class="a2" id="5">

Answer 1

要实现这一点，您可以将 input 事件处理程序附加到所有 .a1 元素，该元素使用 map() 构建这些输入值的数组 然后您可以将其提供给 Math.min() 以检索最低值。

当您使用 jQuery 标记问题时，这里有一个使用它的实现:

$('.a1').on('input', function() {
  var values = $('.a1').map(function() {
    return parseInt(this.value, 10) || null;
  }).get(); 
  
  $('#5').val(Math.min.apply(Math, values));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="a1" />
<input type="text" class="a1" />
<input type="text" class="a1" />
<input type="text" class="a1" />

<br /><br />
<input type="text" class="a2" id="5">

请注意，这否定了增量 id 属性的使用，这表明存在代码异味。