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，那么这些更改就不会反映在-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

Answer 2

请试试这个，

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
            }
        }

HTML更新号码根据另一个号码

2 个答案: