Javascript比较运算符/数字转换不起作用

Posted 2023-04-13

【中文标题】Javascript比较运算符/数字转换不起作用

【英文标题】：Javascript Comparison Operators/Number Conversion Not Working

【发布时间】：2015-08-05 15:53:53

【问题描述】：

我想比较来自两个不同 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

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

【问题讨论】：

这些转换尝试在哪些方面不起作用？

奇怪的是你得到的印象是 document.getElementById("[someElement"]) 是一个字符串（它不是，它是一个元素或null），但是你应该学习如何使用调试器。它会让你的生活更轻松。

【参考方案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.");
    

【讨论】：

我想指出这个答案有效，因为它使用了返回元素的 value 属性，而不是试图将 HTMLElement 强制转换为数字（产生 @987654322 @)。

是的，如果您将 .value 放入 getElementById，则 parseInt 也可以工作，但随后 en.length 将无法正常工作，并且如果不一直放入 .value 则更简洁是可以避免的

【参考方案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);