CODEWITHSUNDEEP
javascripthtml
abcdef
abcdef

Reputation: 137

HTML update number according to another number

I have 2 number fields in my HTML page as follows:

Minimum number <br><input type="number" min="1" step="1" name="-minarch" value="1" id="mn"><br>
Maximum number <br><input type="number" min="1" step="1" name="-maxarch" value="20" id="mx"><br>

I want to update -maxarch if -minarch > -maxarch and -minarch when maxarch < -minarch. I tried the following javascript:

window.onload = function() {
    document.getElementById('mn').onchange = updateMax;
    document.getElementById('mx').onchange = updateMin;
}

function updateMax()
{
  if ( document.getElementById('mx').value < document.getElementById('mn').value ) {
    document.getElementById('mx').value = document.getElementById('mn').value
    }
}

function updateMin()
{
    if ( document.getElementById('mn').value > document.getElementById('mx').value ) {
        document.getElementById('mn').value = document.getElementById('mx').value
     }
}

But it is not working all the time. If I press the scroll down of -maxarch continuously and make it less than -minarch the changes are not being reflected on -minarch.

Is there any other way of going about it?

Upvotes: 0

Views: 55

Answers (2)

user3497034
user3497034

Reputation:

Please try this,

window.onload = function () {
             min = document.getElementById('mn');
             max = document.getElementById('mx');
            min.onchange = updateMax;
            max.onchange = updateMin;
        }

        function updateMax() {
            if (parseInt(max.value) < parseInt(min.value)) {
                max.value = min.value
            }
        }

        function updateMin() {
            if (parseInt(min.value) > parseInt(max.value)) {
                min.value = max.value
            }
        }

Upvotes: 0

ozil
ozil

Reputation: 7117

you need to use parseInt() for comparison. 

document.getElementById('mn').onchange = updateMax;
document.getElementById('mx').onchange = updateMin;

function updateMax() {

    if (parseInt(document.getElementById('mx').value) < parseInt(document.getElementById('mn').value)) {
        document.getElementById('mx').value = document.getElementById('mn').value
    }
}

function updateMin() {

    if (parseInt(document.getElementById('mn').value) > parseInt(document.getElementById('mx').value)) {
        document.getElementById('mn').value = document.getElementById('mx').value
    }
}

Demo Link

Upvotes: 2

Related Questions