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?

It's odd that you got the impressions that document.getElementById("[someElement"]) is a string (It's not, it's an element or null), but you should learn how to use a debugger. It will make your life a lot easier. — Amit
– Amit, Commented Aug 5, 2015 at 16:01

juvian · Accepted Answer · 2015-08-05 15:58:29Z

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

answered Aug 5, 2015 at 15:58

juvian

16.1k2 gold badges42 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jared Smith Over a year ago

I would like to point out that this answer works because it is using the value property of the return element rather than trying to coerce an HTMLElement to a number (yielding NaN).

juvian Over a year ago

True, the parseInt one works as well if you put .value to the getElementById, but then then en.length wouldn´t work well , and its cleaner to not be putting .value all the time if it can be avoided

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

alternative method

the accepted answer is totally more straight-forward. But here's a slightly different way to approach it.

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 5, 2015 at 16:57

Todd

5,4843 gold badges33 silver badges47 bronze badges

Collectives™ on Stack Overflow

Javascript Comparison Operators/Number Conversion Not Working

2 Answers 2

2 Comments

alternative method

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

alternative method

Comments

Your Answer

Sign up or log in

Post as a guest

Related