How can I make my function run when a value is changed instead of when the button is clicked?

Question

I have multiple text boxes now I want to find minimum value from them in a text box as result.

I have this working when I click the button, I need this to update when a change is made in any of the textboxes though not using the onclick event. How do I do that?

 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

To achieve this you can attach an input event handler to all the .a1 elements which builds an array of the values of those inputs using map() which you can then supply to Math.min() to retrieve the lowest value.

As you've tagged the question with jQuery, here's an implementation which uses it:

 $('.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"> 

Note that this negates the use of incremental id attributes which is an indication of a code smell.

Answer 2

The answer below is the simple solution but I think Rorys answer is the better one.

Just register an onchange event:

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

I've added some null checking to allow for empty textboxes and now use min and an array spread ... . There are various improvements can still be made here, Rorys is still the better answer IMO.

Answer 3

You may listen to the change event of the textboxes and call the minimum function on the change of values:

 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

All the input fields have the same class a1 so you can do this

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

On every input you make in the input fields this will calculate and display your new minimum value

Also it is bad practice to put you funcions on the HTML Page like this:

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

it is much better to call the funcion from the javascript page.

Answer 5

Using document.querySelectorAll get all the element with a common class then use addEventListener and add keyup event , On keyup get all the values & find the minimum

 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

Just put oninput event on each input

 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

You can use a class and keyup this will be trigger when you type in something in the textbox. I would like to suggest to start an id with text instead of an number.

  $(".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">