javascript - HTML更新编号(根据另一个编号)

我的HTML页面中有2个数字字段，如下所示：

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>

我想更新-maxarch如果-minarch > -maxarch和-minarch maxarch < -minarch。我尝试了以下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
     }
}

但是它并不是一直都在工作。如果我连续按下-maxarch的向下滚动并使其小于-minarch，则更改不会反映在-minarch上。

还有其他方法吗？

最佳答案

您需要使用parseInt()进行比较。

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