2016-04-08 8 views
0

Ich versuche, eine einfache if-Anweisung zu erstellen, um die Hintergrundfarbe eines div zu ändern, abhängig von der in einem anderen div eingegebenen Zahl. Ich habe versucht, ein paar Änderungen am Code vorzunehmen, kann aber nie die letzte else if-Anweisung erhalten.Letzte else if-Anweisung funktioniert nicht

if ($(".pacenumber").text() <= "59") { 
document.getElementById("paceheader").style.backgroundColor = "red"; 
} 
else 
if ($(".pacenumber").text() >= "60" < "80") { 
document.getElementById("paceheader").style.backgroundColor = "yellow"; 
} 
else 
if ($(".pacenumber").text() >= "80") { 
document.getElementById("paceheader").style.backgroundColor = "green"; 
} 

Wenn die eingegebene Nummer < = "59" die div wechselt auf Rot ist richtig.

Wenn die eingegebene Nummer> = "60" und < "80" ist, wechselt das Div korrekt zu gelb.

Wenn die eingegebene Nummer> = "80" ist, bleibt das div gelb und wechselt nicht zu grün.

Gibt es eine mögliche Lösung, um die letzte if-Anweisung zu erhalten?

+4

> = "60" <"80" ist nicht gültig und Sie vergleichen Zeichenketten, nicht Zahlen. – epascarello

+0

Die letzte Aussage in einem multiple Wenn/wenn sonst ist – zer00ne

+1

Frage: Sie vergleichen, was der Code vorschlägt Zahlen sind. Warum vergleichen Sie stattdessen Zeichenfolgen? Zum Beispiel: die Zeichenkette "7" ist ** nicht ** kleiner als "63", weil wir Strings vergleichen, und im Text steht alles, was mit "6" beginnt, vor allem, was mit "7" beginnt. Dieser Code wird zu einer Fehlerquelle, wenn Sie diese '... text()' Aufrufe nicht in eine 'parseInt (...)' umbrechen und stattdessen mit reellen Zahlen vergleichen. –

Antwort

1

Sie können diese Syntax verwenden, um zu überprüfen wenn ein Wert in einem Bereich:

if ($(".pacenumber").text() >= "60" < "80") { 

Dies wird so interpretiert, als ob Sie

geschrieben hatte
if (($(".pacenumber").text() >= "60") < "80") { 

($(".pacenumber").text() >= "60") gibt entweder true oder false zurück. Wenn Sie einen booleschen Wert mit einer Zeichenfolge vergleichen, wird false in "0" konvertiert und true wird in "1" konvertiert. Beide sind weniger als "80", so dass der Test immer wahr ist.

Verwenden Sie einfach

else 
if ($(".pacenumber").text() < "80") { 

Sie brauchen nicht zu prüfen, ob es zumindest "60" ist, weil der vorherige if kümmert sich um alle Werte kleiner als diese. Wenn es zu diesem else if kommt, muss es >= "60" sein.

+0

Hervorragende Erklärung warum das finale if nie erreicht wird. –

+0

Danke, hat perfekt funktioniert! Ich habe Javascript nicht so viel verwendet, also völlig vergessen, wie die if-Anweisungen funktionierten. – Lparker

0

Wie von den Kommentatoren erwähnt, fehlt der zweite Zweig ein Teil und Sie sollten vergleichen mit Zahlen nicht Zeichenfolge.

function tt(t) { 
    if (t <= 59) { 
     return 1; 
    } 
    else 
    if (t >= 60 && t < 80) { 
     return 2; 
    } 
    else 
    if (t >= 80) { 
     return 3; 
    } 
} 

mit Hilfe von Strings (wie "80", "60"), die Funktion aufrufen tt("080") würde zurückkehren 1. über die Definition verwenden, gibt es 3.

+0

Der letzte Eintrag in mehreren else-if-Anweisungen ist immer 'else'. Das teilt JS mit, dass die Abfrage beendet wird, und erwartet die schließenden geschweiften Klammern - oder einen Einstieg in eine andere Unterroutine mit einer linken geschweiften Klammer. – Sparky256

+0

Nein. In diesem Fall könnte ja die letzte durch eine 'else' ersetzt werden, aber nicht diese: 'if (var ==" a ") {} sonst if (var ==" b ") {} else if (var == "c") {} ' Wenn der letzte Wert stattdessen in 'else' geändert wird, dann werden alle Werte außer 'a' und 'b' diesen Code ausführen, was nicht beabsichtigt ist. –

0

Ihr Code könnte sein, einfach die folgende:

var pace = parseInt($(".pacenumber").text(), 10); 
var color = "green"; 

if (pace < 60) { 
    color = "red"; 
} else if (pace < 80) { 
    color = "yellow"; 
} 
document.getElementById("paceheader").style.backgroundColor = color; 

Anmerkung den Mangel an wiederholten Aufforderungen an jquery und der einzige Ort, an dem die Hintergrundfarbe

0

Gerade

ändern gesetzt
($(".pacenumber").text() >= "60" < "80") { 

zu

($(".pacenumber").text() >= "60" && $(".pacenumber").text() < "80") { 
0
if ($(".pacenumber").text() <= 59) { 
document.getElementById("paceheader").style.backgroundColor = "red"; 
} 
else 
if ($(".pacenumber").text() >= 60 < 80) { 
document.getElementById("paceheader").style.backgroundColor = "yellow"; 
} 
else 
if ($(".pacenumber").text() >= 80) { 
document.getElementById("paceheader").style.backgroundColor = "green"; 
} 
else{} 
} 

// Ich habe einen Nullabschluss hinzugefügt, um die Funktion ordnungsgemäß zu schließen. Irrationale Werte führen zu keiner Farbänderung. Achten Sie auf Zahlen und Textnummern. Ich habe die Anführungszeichen entfernt, damit sie zu wörtlichen Zahlen werden. Macht die Mathematik viel einfacher.

Verwandte Themen