CODEWITHSUNDEEP
javascript
showtime
showtime

Reputation: 1462

Why I cant call function onChange of input? HTML/jQuery

I have two input fields and I want to reflect the value of the first input as a minimum value of the second one but it is not calling the function which I built for that reason:

var quantity_gates = document.getElementById('quantity_gates');
var quantity_spots = document.getElementById('quantity_spots');

function count_spots() {
  var quantity_spots_n = quantity_spots.value;
  var quantity_gates_n = quantity_gates.value;
  quantity_gates_n = Number(quantity_gates_n);
  quantity_spots_n = Number(quantity_spots_n);

  quantity_spots_n = Math.min(quantity_gates_n, Math.max(1, quantity_gates_n));
}
<input type="number" onChange="count_spots()" id="quantity_gates" value="1" name="quantity_parking_gates" min="1" max="9999">
<input type="number" id="quantity_spots" value="1" name="quantity_parking_spots" min="1" max="9999">

Upvotes: 1

Views: 941

Answers (3)

Rory McCrossan
Rory McCrossan

Reputation: 337570

Firstly use unobtrusive event handlers instead of onX attributes. The latter are outdated and no longer good practice. You can also use the input event to have the UI be more responsive to user input. In addition you can use the unary operator as a shorthand for the Number() function, and || to default the value to 1.

To solve your issue you need to set the value property of the second field directly as it holds a string value, not a reference to the value property. Also, use Math.max() to set the second field to the higher of the two values.

var quantity_gates = document.getElementById('quantity_gates');
var quantity_spots = document.getElementById('quantity_spots');

quantity_gates.addEventListener('input', function() {
  quantity_spots.min = this.value;
  quantity_spots.value = Math.max(this.value, +quantity_spots.value || 1);
});

quantity_spots.addEventListener('change', function() {
  this.value = Math.max(+this.value, +this.min);
});
<input type="number" id="quantity_gates" value="1" name="quantity_parking_gates" min="1" max="9999">
<input type="number" id="quantity_spots" value="1" name="quantity_parking_spots" min="1" max="9999">

Upvotes: 1

MaximilianK
MaximilianK

Reputation: 63

var quantity_gates = document.getElementById('quantity_gates');
var quantity_spots = document.getElementById('quantity_spots');

function count_spots() {
  var quantity_spots_n = quantity_spots.value;
  var quantity_gates_n = quantity_gates.value;
  quantity_gates_n = Number(quantity_gates_n);
  quantity_spots_n = Number(quantity_spots_n);

  quantity_spots_n = Math.min(quantity_gates_n, Math.max(1, quantity_gates_n));
  quantity_spots.min= quantity_spots_n //Sets the new minimum
  quantity_spots.value= quantity_spots_n //Sets the value 
}
<input type="number" onChange="count_spots()" id="quantity_gates" value="1" name="quantity_parking_gates" min="1" max="9999">
<input type="number" id="quantity_spots" value="1" name="quantity_parking_spots" min="1" max="9999">

Upvotes: 1

Le-Mr-Ruyk
Le-Mr-Ruyk

Reputation: 179

You need to asign the min in the second field : by adding in the end of your function

quantity_spots.value=quantity_spots_n; // to assign value
quantity_spots.min=quantity_spots_n; // to prevent user from decrasing the value

Upvotes: 1

Related Questions