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

You've tagged this [tag:jquery] but it doesn't include any jquery code. Are you happy to have a jquery solution? — Liam, Jun 07 '18 at 08:49
Why don't you try to add an onchange event on each text field that you want to take iup to date ? `` — Jordan Breton, Jun 07 '18 at 08:51

score 2 · Accepted Answer · answered Jun 07 '18 at 08:52

2

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.

answered Jun 07 '18 at 08:52

Rory McCrossan

331,213
40
305
339

thanks but this is not working on side kindly help me more – user3602024 Jun 07 '18 at 09:11
1

Please provide more information than simply 'it doesn't work' - as you can clearly see above that it does. As a first step of debugging, check the console for errors. Also ensure you've included jQuery.js in the page and placed this code in a document.ready event handler – Rory McCrossan Jun 07 '18 at 09:13
2

I'll assume from that comment that you got it working. If so, glad to help :) – Rory McCrossan Jun 07 '18 at 09:22
sir i want to ask one more thing now can i – user3602024 Jun 08 '18 at 18:22

Liam · Answer 2 · 2018-06-07T09:13:28.463

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.

sir thanks for updating question in a meaning full way but you have set textbox values which will be set by user and what happen user fill only 2 textbox it will show zero — user3602024, Jun 07 '18 at 08:59

score 1 · Answer 3 · answered Jun 07 '18 at 08:52

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

Happy Coconut · Answer 4 · 2018-06-07T09:10:19.520

0

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.

edited Jun 07 '18 at 09:10

answered Jun 07 '18 at 08:57

Happy Coconut

973
4
14
33

Or just do `$('.a1')` being as they all have the same class. they also already have the id `1` so why change this to `One`? – Liam Jun 07 '18 at 08:59

score 0 · Answer 5 · answered Jun 07 '18 at 08:59

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

score 0 · Answer 6 · answered Jun 07 '18 at 09:00

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

Wow · Answer 7 · 2018-06-07T10:06:59.293

-2

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

edited Jun 07 '18 at 10:06

answered Jun 07 '18 at 08:51

Wow

177
1
8

2

This is kinda right but a bit lazy. You could easily make a working example and explain it – Liam Jun 07 '18 at 08:52
@Liam an followup as you suggested – Wow Jun 07 '18 at 09:04

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

7 Answers7