替代方法

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（＆＃34; [someElement＆＃34;]）是一个字符串。所以我尝试做的是将元素的值转换为数字，这不起作用。我试图做的例子如下：

    /*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

我建议尝试使用数字函数：

    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

替代方法

接受的答案完全是直截了当的。但这是一种略微不同的方法。

What we want 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比较运算符/数字转换不起作用

2 个答案:

替代方法