2 boxes, 2 dynamic maximums changing when one is set
<p>I've got this code which sets dynamic maximum values for two text boxes:</p>

<pre><code>var length = document.getElementById('firstBox'),
    width = document.getElementById('secondBox');
    max1 = 100;
    min1 = 20;
    max2 = 200;
    min2 = 10;

length.onchange = function() {
    var maxValue, minValue;

    if (width.value &lt; max1) {
        maxValue = max2;
        minValue = (width.value &lt; min1) ? min1 : min2;
    } else {
        maxValue = max1;
        minValue = min1;
    }
    if (this.value &gt; maxValue) {
        this.value = maxValue;
    }
    if (this.value &lt; minValue) {
        this.value = minValue;
    }
};

width.onchange = function() {
    var maxValue, minValue;

    if (length.value &lt; max1) {
        maxValue = max2;
        minValue = (length.value &lt; min1) ? min1 : min2;
    } else {
        maxValue = max1;
        minValue = min1;
    }
    if (this.value &gt; maxValue) {
        this.value = maxValue;
    }
    if (this.value &lt; minValue) {
        this.value = minValue;
    }
};
</code></pre>

<p>It works very well, only I would like to have the maximum (max2) switch to the other box if the customer types in a value higher than the lowest maximum (max1) in that box.</p>

<p>Say a customer types "150" in box one, then that box automatically gets assigned max2 "200" - but what I want, is if the customer then also types "150" or any value higher than max1 in the second box, then that should become the max2, meaning the first box will be lowered from it's "150" to "100" as is the max1. And vice versa.</p>

<p>Hopefully that's understandable, otherwise let me know and I'll try to explain it better.</p>
