Question

Hopefully I can explain what I’m looking for…

I’ve got two text boxes: Length and Width

In one box the max value is 200 while in the other it’s 100. At the moment I’m using this code:

document.getElementById('Length').onchange = function(){
      if(this.value > 200){
           this.value = 200;
      }
      if(this.value < 10){
           this.value = 10;
      }
}


    document.getElementById('Width').onchange = function(){
      if(this.value > 100){
           this.value = 100;
      }
      if(this.value < 20){
           this.value = 20;
      }
}

Here’s the tricky part: I would like it to not be set which box has which max value. That should depend on what the customer types.
If someone types a value of under 100 in Length, then Width’s max is the 200. But if someone types “158” in Length then Width’s max should be the 100 and Length’s max is the 200. And Vice versa.

Also, if someone first types 150 in Length and then types 160 in Width, then the 250 in Length should be changed to 100 – so the 200 max value should belong to the box that’s most recently has a value higher than the 100 max.

Edit: Also, would it be possible to have the max values to be connected with a minimum value? So the box that gets the 200 max also has a 10 minimum and then the other box has the 100 max and the 20 minimum.
Hope that’s understandable.

Answer 1

Something like this, perhaps:

var length = document.getElementById('Length'),
    width = document.getElementById('Width');

length.onchange = function() {
    var maxValue = width.value < 100 ? 200 : 100;
    if (this.value > maxValue) {
        this.value = maxValue;
    }
    if (this.value < 10) {
        this.value = 10;
    }
};

width.onchange = function() {
    var maxValue = length.value < 100 ? 200 : 100;
    if (this.value > maxValue) {
        this.value = maxValue;
    }
    if (this.value < 10) {
        this.value = 10;
    }
};

jsFiddle.