Javascript Comparison Operators/Number Conversion Not Working

Question

I want to compare two values from two different HTML input boxes.

Here is my 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">

The type on the input element is even number.

I have an event listener in javascript for these elements, here:

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

When both of these elements are not blank, I want to compare them and make sure the first input box's number is less than the second input box's number. If it is more, I want an alert box to pop up. If the first input box's number is less than the second input box's number, then I want other things to happen, but for now I want a different alert box to pop up.

Here is my function pertaining to the event handlers:

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.");
        }
    }
}

This does not work.

Take the example of the first input box being typed as 145, and the second input box being typed as 150.

When I type in the input first box's number of 145, nothing pops up. This is fine. Then I go to start typing the second input box's number of 150. I type the first number, which is 1, and one of the alert boxes pops up that tells me the begin row is more than the end row. So far, so good. I then type in the second number of 150, which is 5, and I get the alert box telling me that the end row is more than the beginning row, essentially that 145 > 15.

From the research that I've done, it seems that document.getElementById("[someElement"]) is a string. So what I tried to do was convert the value of the element to a number, which did not work. Example of what I tried to do is below:

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

Here is the jsFiddle for the original code: jsFiddle: Comparison Operators

I'm at a complete loss. Can someone point me in the right direction on how to tackle this problem?

Answer 1

I would recommend trying to make use of Number function:

    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.");
    }