Question

我现在有多个文本框我想在文本框中找到它们的最小值。

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

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

当您使用jQuery标记问题时，这是一个使用它的实现：

＆＃13;

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

＆＃13;

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

＆＃13;

请注意，这会取消使用增量id属性，这表示代码异味。

Answer 2

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

只需注册一个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">

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

Answer 3

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

＆＃13;

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);
})

＆＃13;

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

＆＃13;

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页面调用funcion要好得多。

Answer 5

使用document.querySelectorAll获取具有公共类的所有元素然后使用addEventListener并添加keyup事件，On keyup获取所有值＆amp;找到最低

＆＃13;

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;
 })
   })

＆＃13;

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

＆＃13;

Answer 6

只需在每个输入上输入输入事件

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 7

您可以使用类和键盘，当您在文本框中键入内容时，这将触发。我想建议用文本而不是数字来启动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">

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

7 个答案: