javascript - 当单个数字附加到输入字段中的值时，onchange 事件侦听器不起作用 [type=number]

Question

我有两个输入字段，它们都onchange添加了事件侦听器：

HTML

<input type="number" size=5 style="width:80px;" id="funit" autocomplete="off"  required>
<input type="number" size=5 style="width:80px;" id="tunit" autocomplete="off"  required>

JAVASCRIPT

document.getElementById("funit").addEventListener("change",f1);
document.getElementById("tunit").addEventListener("change",f1);

function f1(){
    var funit=document.getElementById("funit").value;
    var tunit=document.getElementById("tunit").value;

    if(funit.toString()!="" && tunit.toString()!=""){
        if(funit>tunit){
            alert("incorrect units");
            document.getElementById("funit").value="";
            document.getElementById("tunit").value="";
        }
    }
}

现在我有另一个函数，它从表的一行中获取值并将它们插入到字段中。例如：

 funit=6;
 tunit=7;

现在，如果我在输入中添加一个 0 funit，即，如果我将其设为 60，那么它应该触发onchange侦听器，但它不会。只有当我删除两个输入字段，然后再次键入时，才会触发事件侦听器。为什么这样？我该如何解决？

标签： javascripthtml

Answer 1

 document.getElementById("funit").addEventListener("change",f1);
    document.getElementById("tunit").addEventListener("change",f1);

    function f1(){
        var funit=document.getElementById("funit")
        var tunit=document.getElementById("tunit")
        

        if(funit.value && tunit.value){
            if(Number(funit.value)>Number(tunit.value)){
                alert("incorrect units");
                funit.value="";
                tunit.value="";
            }
        }
    }

<input type="number" size=5 style="width:80px;" id="funit" autocomplete="off"  required>
<input type="number" size=5 style="width:80px;" id="tunit" autocomplete="off"  required>