JavaScript-Variable wird wahr, wenn es nicht sollte

Question

Ich habe eine Art von Geschäft. 1 Bar mit Filtern, 1 Bar mit Artikeln. Filterleiste hat Eingabefeld FROM und TO für Preise Es sieht aus wie dieses

<input id="pricefrom" type="text" placeholder="Min" style="position:relative; float: left; width:100px;"> 
<input id="priceto" type="text" placeholder="Max" style="position:relative; float: right; width:100px;"> 

Und Skript, das Eingabe behandelt, wenn der Benutzer konzentriert sich heraus:

$("#pricefrom").focusout(function() { 
    var from = $("#pricefrom").val(); 
    var to = $("#priceto").val(); 
    console.log("from: "+from); 
    console.log("to: "+to); 
    if(from > to){ 
     $('#pricefrom').val(to); 
     from = to; 
     console.log("from > to"); 
    } 
    drawItems(from, to); 
}); 
$("#priceto").focusout(function() { 
    var from = $("#pricefrom").val(); 
    var to = $("#priceto").val(); 
    console.log("from: "+from); 
    console.log("to: "+to); 
    if(to < from){ 
     $('#priceto').val(from); 
     to = from; 
     console.log("to < from"); 
    } 
    drawItems(from, to); 
}); 

Wenn Benutzer von Preis größer als TO setzt, ist macht es eben. Eingang "150-50" => "150-150"

Aber es funktioniert zufällig nur 1 mal. Dann hat es zum Beispiel "200-200" Werte. Ich habe einen Preis von 50 gesetzt, um den Wert zu korrigieren. Es loggt "von: 50" bis: 200 "" von> bis "und macht FROM gleich 200. Aber sein niedriger, wie zur Hölle (von> bis) wird wahr?

Sry für schlechtes Englisch.

Answer 1

.val() gibt Zeichenfolgen zurück, keine Zahlen, also führen Sie lexikographische Vergleiche durch, keine numerischen Vergleiche. Die Zeichenfolge "50" ist größer als "150".

Konvertieren Sie die Werte in Zahlen, bevor Sie sie vergleichen.

var from = parseInt($("#pricefrom").val(), 10); 
var to = parseInt($("#priceto").val(), 10); 

Answer 2

Sieht wie ein Standardtypwitz von JavaScript aus. Vergleichen Sie zwei Beispiele:

50 > 200; // gives false 
"50" > "200"; // gives true, because, "5" greater then "2" 

.val() gibt einen String zurück, so dass Sie Strings vergleichen. Rufen Sie parseInt vor dem Vergleich, die aus solchen Fehler vermeiden sollten:

var from = parseInt($("#pricefrom").val(), 10); 
var to = parseInt($("#priceto").val(), 10); 

P. S. Und vergessen Sie niemals Radix für parseInt (10 in unserem Fall). Andernfalls, wenn in der Eingabe etwas wie "023" ist (ein Wert, beginnend bei 0), können einige Browser es als Oktalzahl verstehen.