javascript - HTML根据另一个数字更新数字

Question

我的 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这些更改未反射(reflect)在 -minarch 上.

还有其他办法吗？

Answer 1

您需要使用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