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

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属性的使用，而增量id属性是代码异味的指示。

Answer 2

下面的答案是简单的解决方案，但我认为Rorys的答案是更好的解决方案。

只需注册一个onchange事件：

 function minimum() { var valArray = []; if (document.getElementById("1").value != ''){ valArray.push(document.getElementById("1").value); } if (document.getElementById("2").value != ''){ valArray.push(document.getElementById("2").value); } if (document.getElementById("3").value != ''){ valArray.push(document.getElementById("2").value); } if (document.getElementById("4").value != ''){ valArray.push(document.getElementById("4").value); } var m = Math.min(...valArray); document.getElementById("5").value = m; } minimum(); 

 <input type="text" onchange="minimum()" class="a1" id="1" value="1" /> <input type="text" onchange="minimum()" class="a1" id="2" value="2" /> <input type="text" onchange="minimum()" class="a1" id="3" value="3" /> <input type="text" onchange="minimum()" class="a1" id="4" value="4" /> <br /><br /> <input type="text" class="a2" id="5"> 

我添加了一些null检查，以允许使用空文本框，现在使用min和一个数组扩散 ... 这里仍然可以进行各种改进，Rorys仍然是IMO的更好答案。

Answer 3

您可以侦听文本框的change事件，并在值更改时调用minimum函数：

 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; } document.querySelectorAll('input[type=text]').forEach(item => { item.addEventListener('change', minimum); }) 

 <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 4

所有输入字段都具有相同的类a1，因此您可以执行此操作

$(".a1").on("input", function(){
       minimum(); // i Guess this is the function that displays the min value
});

在输入字段中进行的每个输入中，这将计算并显示新的最小值

同样，将功能放到HTML页面上也是一种不好的做法：

<input type="button" onclick="minimum()" value="MIN" />

最好从javascript页面调用函数。

Answer 5

使用document.querySelectorAll获取具有公共类的所有元素，然后使用addEventListener并添加keyup事件，在keyup上获取所有值并找到最小值

 document.querySelectorAll('.a1').forEach(function(item) { item.addEventListener('keyup', function() { // ... is spread operator, is used to use array methods // map is an array method which will here return a new array with all the // values from input let minVal = Math.min.apply(null, [...document.querySelectorAll('.a1')].map(function(items) { return items.value })) document.getElementById("5").value = minVal; }) }) 

 <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 6

只需在每个输入上放置oninput事件

 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" oninput="minimum()"/> <input type="text" class="a1" id="2" value="2" oninput="minimum()"/> <input type="text" class="a1" id="3" value="3" oninput="minimum()"/> <input type="text" class="a1" id="4" value="4" oninput="minimum()"/> <input type="button" onclick="minimum()" value="MIN" /> <br /><br /> <input type="text" class="a2" id="5"> 

Answer 7

您可以使用类和键入键，当您在文本框中键入内容时将触发此键。 我想建议以ID而不是数字开头的ID。

  $(".a1").keyup(function () { var a = $("#a1").val(); var b = $("#a2").val(); var c = $("#a3").val(); var d = $("#a4").val(); var m = Math.min(a, b, c, d); $("#a5").val(m); }); 

 <input type="text" class="a1" id="a1" value="1" /> <input type="text" class="a1" id="a2" value="2" /> <input type="text" class="a1" id="a3" value="3" /> <input type="text" class="a1" id="a4" value="4" /> <input type="button" value="MIN" id="btn_min"/> <br /><br /> <input type="text" class="a2" id="a5">