Javascript 比较 Operators/Number 转换无效

Question

我想比较来自两个不同 HTML 输入框的两个值。

这是我的 HTML:

<input class="rowInput" id="startRow" type="number" style="margin-top: 15px;" placeholder="Beginning Row"> 
<input class="rowInput" id="enderRow" type="number" style="margin-top: 15px;" placeholder="Ending Row">

输入元素上的类型为偶数。

我在 javascript 中为这些元素设置了事件侦听器，此处：

document.getElementById("startRow").addEventListener("keyup", createFacings);
document.getElementById("enderRow").addEventListener("keyup", createFacings);

当这两个元素都不为空时，我想比较它们并确保第一个输入框的数字小于第二个输入框的数字。如果更多，我希望弹出一个警告框。如果第一个输入框的数字小于第二个输入框的数字，那么我希望发生其他事情，但现在我想要弹出一个不同的警告框。

这是我的与事件处理程序有关的函数：

function createFacings()
{
    var st = document.getElementById("startRow");
    var en = document.getElementById("enderRow");

    if(st.length == 0 || en.length == 0)
    {
         return;
    }

    if(st.value != "" && en.value != "")
    {
        if(st.value > en.value)
        {
            alert(st.value + " " + en.value + " " + "begin row is more than end row.");
        }
        else if(st.value < en.value)
        {
            alert(st.value + " " + en.value + " " + "begin row is less than end row. This is what we want.");
        }
    }
}

这行不通。

以第一个输入框输入145，第二个输入框输入150为例

当我在第一个输入框中输入数字 145 时，没有弹出任何内容。这可以。然后我开始输入第二个输入框的数字 150。我输入第一个数字 1，弹出一个警告框，告诉我开始行多于结束行。到目前为止，一切都很好。然后我输入第二个数字 150，即 5，我得到警告框，告诉我结束行比开始行多，本质上是 145 > 15.

根据我所做的研究，document.getElementById("[someElement"]) 似乎是一个字符串。因此，我尝试将元素的值转换为数字，但没有成功。下面是我尝试做的示例：

    /*I first tried this...*/
    var st = Number(document.getElementById("startRow"));
    var en = Number(document.getElementById("enderRow"));

    /*The above did not work. So then I tried this...*/
    var st = parseInt(document.getElementById("startRow"));
    var en = parseInt(document.getElementById("enderRow"));

    /*That did not work either. So then I tried this...*/
    var st = parseInt(document.getElementById("startRow"));
    var en = parseInt(document.getElementById("enderRow"));

   /*...which also did not work.*/

这是原始代码的jsFiddle： jsFiddle: Comparison Operators

我完全不知所措。有人可以为我指出正确的方向来解决这个问题吗？

Answer 1

我建议尝试使用 Number 函数：

    var st = document.getElementById("startRow").value;
    var en = document.getElementById("enderRow").value;

    if(st.length == 0 || en.length == 0)
    {
        return;
    }

    st = Number(st)
    en = Number(en)

    if(st > en)
    {
        alert(st + " " + en+" " + "begin row is more than end row.");
    }
    else if(st < en)
    {
        alert(st + " " + en + " " + "begin row is less than end row.This is what we want.");
    }

Answer 2

替代方法

接受的答案完全更直接。但这里有一个稍微不同的方法来处理它。

JS

   function createFacings() {
        var st = +document.getElementById("startRow").value, // `+` <- parseInt
            en = +document.getElementById("endRow").value;
        if (st && en) {
          msg = ["begin row is", 
                 st > en ? "more" : "less", 
                 "than end row.",
                 st < en ? "This is what we want."].join(' ');
          alert(msg);  
        }
    }

Javascript 比较 Operators/Number 转换无效

Javascript Comparison Operators/Number Conversion Not Working

javascript

html

number-formatting

comparison-operators

替代方法