Javascript Compare Numbers

Question

its my first time, so please be gentle. I wrote a simple number comparison a while ago. But the comparison gives back a "wrong" bool.

Heres my Code:

var UpperLimit = document.getElementById("UpperLimit").value; 
var LowerLimit = document.getElementById("LowerLimit").value; 

if (UpperLimit < LowerLimit){
 alert("Upper Limit is smaller as the Lower Limit!")
 return false; //Exit Function
} else {

// **do something with the Upper and Lower Limit**

}

Lower Limit:<input style=" margin-left: 15px;" class="Limit" id="LowerLimit" type="number">m³</input>
Upper Limit:<input style=" margin-left: 17px;" class="Limit" id="UpperLimit" type="number">m³</input>

If i (for example) enter 150 for Lower Limit and 1000 for the Upper Limit in HTML, the comparison give me back a "true" and shows the alert. I dont know where the error is, i guess JS is interpreting the value wrong but i dont know what to do.

Thanks for your help!

Caliban

score 1 · Accepted Answer · answered Sep 04 '18 at 08:53

1

Your value from the input is still returned so you must convert the input value to a number.

You can do it like so:

var UpperLimit = Number(document.getElementById("UpperLimit").value);   
var LowerLimit = Number(document.getElementById("LowerLimit").value);

answered Sep 04 '18 at 08:53

Adrian

8,271
2
26
43

Thank you very much! I thougth JS would allready know that the imput is a number. I guessed wrong! – Caliban Sep 04 '18 at 08:58
@Caliban You're welcome. Mark it as the correct answer using the green tick if this answer has helped you. It helps other people who are coming to visit this question find the right answer faster. – Adrian Sep 04 '18 at 09:03
I wanted to do it earlyer, but i needed to wait 10 Minutes befor Mark it ;) Again, thank you! – Caliban Sep 04 '18 at 09:12
parseInt or parseFloat should be used, not the instantiator for Number class. – BRO_THOM Sep 04 '18 at 09:53
@BRO_THOM I see no new keyword, so the type of UpperLimit and LowerLimit will be a number not an object and thus I see no issue in using a Number ***function***. If this is not clear I recommend reading [this](https://stackoverflow.com/questions/4719320/new-number-vs-number). – Adrian Sep 04 '18 at 09:57

scipper · Answer 2 · 2018-09-04T09:29:47.653

0

It's because the value is of type string, even if you set the input type to number.

1000 < 150 = false;
"1000" < "150" = true;

to correct this, just cast your values to Number like:

var UpperLimit = Number(document.getElementById("UpperLimit").value);   
var LowerLimit = Number(document.getElementById("LowerLimit").value);

EDIT:

for reference why this happens to string comparison: Why is one string greater than the other when comparing strings in JavaScript?

edited Sep 04 '18 at 09:29

answered Sep 04 '18 at 08:54

scipper

2,944
3
22
45

2

if you want to parse to a number in javascript, please use `Number(...)` in favor over `parseInt`. – KarelG Sep 04 '18 at 08:56

score 0 · Answer 3 · answered Sep 04 '18 at 08:54

0

you have to cast value of input to number because it returns string

var UpperLimit = Number( document.getElementById("UpperLimit").value);  
var LowerLimit = Number( document.getElementById("LowerLimit").value);  

if (UpperLimit < LowerLimit){
alert("Upper Limit is smaller as the Lower Limit!")
return false;   //Exit Function
} else {

**do something with the Upper and Lower Limit**

}

answered Sep 04 '18 at 08:54

Ahmed Yousif

2,298
1
11
17

Thank you very much! I thougth JS would allready know that the imput is a number. I guessed wrong! – Caliban Sep 04 '18 at 08:58

score 0 · Answer 4 · answered Sep 04 '18 at 09:19

Please try this

function compair()
{
debugger;
var UpperLimit = document.getElementById("UpperLimit").value; 
var LowerLimit = document.getElementById("LowerLimit").value; 
var isvalid=true;
   let regex = new RegExp(/[^0-9]/, 'g');
  
    if (UpperLimit.match(regex)) {
       alert("UpperLimit Must be a valid number");
         isvalid=false;
    }
     if (LowerLimit.match(regex)) {
       alert("LowerLimit Must be a valid number");
         isvalid=false;
    }
if (isvalid)
{
if ( parseInt(UpperLimit) < parseInt(LowerLimit)){
alert("Upper Limit is smaller then the Lower Limit!")
return false; //Exit Function
}
 else {
 alert("Lower Limit is smaller then the upper Limit!")
}
}
}

<html>
<head>

</head>
<body>
Lower Limit: <input style=" margin-left: 15px;" class="Limit" id="LowerLimit" type="text"/>m³ <br/>

Upper Limit: <input style=" margin-left: 17px;" class="Limit" id="UpperLimit" type="text"/>m³
<br/>
<input type="button" onclick="compair()" value="Submit"/>
</body>
</html>

Javascript Compare Numbers

4 Answers4