JavaScript if/else-Anweisungen

Definition und Verwendung

if/else-Anweisungen führen einen Codeblock aus, wenn die angegebene Bedingung wahr ist. Wenn die Bedingung falsch ist, kann ein anderer Codeblock ausgeführt werden.

if/else-Anweisungen sind ein Teil der "Bedingungen" in JavaScript und werden verwendet, um verschiedene Aktionen abhängig von verschiedenen Bedingungen auszuführen.

In JavaScript haben wir die folgenden Bedingungsanweisungen:

  • Verwenden Sie if, um den Codeblock anzugeben, der ausgeführt werden soll, wenn die angegebene Bedingung wahr ist
  • Verwenden Sie else, um den Codeblock anzugeben, der ausgeführt werden soll, wenn die gleiche Bedingung falsch ist
  • Verwenden Sie else if, um eine neue Bedingung zu testen, wenn die erste Bedingung falsch ist
  • Verwenden Sie switch, um einen von mehreren Codeblöcken auszuführen

Beispiel

Wenn die aktuelle Zeit (STUNDE) kleiner als 20:00 ist, wird "Good day" im Element mit id="demo" ausgegeben:

var time = new Date().getHours(); 
if (time < 20) {
  document.getElementById("demo").innerHTML = "Good day";
}

Probieren Sie es selbst aus

Mehr TIY-Beispiele finden Sie unten auf der Seite.

Syntax

Der if-Ausdruck bestimmt den Codeblock, der ausgeführt wird, wenn die Bedingung wahr ist:

if (Bedingung) {
  // Codeblock, der ausgeführt wird, wenn die Bedingung wahr ist
}

Die else-Anweisung gibt den Codeblock an, der ausgeführt wird, wenn die Bedingung falsch ist:

if (condition) {
  // Codeblock, der ausgeführt wird, wenn die Bedingung wahr ist
} else { 
  // Codeblock, der ausgeführt wird, wenn die Bedingung falsch ist
}

Wenn die erste Bedingung falsch ist, gibt die else if-Anweisung eine neue Bedingung an:

if (condition1) {
  // Codeblock, der ausgeführt wird, wenn Bedingung1 wahr ist
} else if (condition2) {
  // Codeblock, der ausgeführt wird, wenn Bedingung1 falsch und Bedingung2 wahr ist
} else {
  // Codeblock, der ausgeführt wird, wenn Bedingung1 falsch und Bedingung2 falsch ist
}

Parameterwert

Parameter Beschreibung
Bedingung Notwendig. Ausdruck, der true oder false ergibt.

Technische Details

JavaScript-Version: ECMAScript 1

Mehr Beispiele

Beispiel

Wenn die Zeit weniger als 20:00 beträgt, erstellen Sie eine "Good day"-Grüßung,否则 erstellen Sie "Good evening":

var time = new Date().getHours(); 
if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

Probieren Sie es selbst aus

Beispiel

Wenn die Zeit weniger als 10:00 beträgt, erstellen Sie eine "Good morning"-Grüßung, wenn nicht, aber die Zeit weniger als 20:00 beträgt, erstellen Sie eine "Good day"-Grüßung,否则 erstellen Sie eine "Good evening":

var time = new Date().getHours(); 
if (time < 10) {
  greeting = "Good morning";
} else if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

Probieren Sie es selbst aus

Beispiel

Wenn der id des ersten <div>-Elements im Dokument "myDIV" ist, ändern Sie die Zeichengröße:

var x = document.getElementsByTagName("DIV")[0];
if (x.id === "myDIV") {}} 
  x.style.fontSize = "30px";
}

Probieren Sie es selbst aus

Beispiel

Wenn der Benutzer auf das Bild klickt, ändern Sie den Wert der Eigenschaft (src) des <img>-Elements:

<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<script>
function changeImage() {
  var image = document.getElementById("myImage");
  if (image.src.match("bulbon")) {
    image.src = "pic_bulboff.gif";
  } else {
    image.src = "pic_bulbon.gif";
  }
}
</script>

Probieren Sie es selbst aus

Beispiel

Zeigen Sie eine Nachricht an, basierend auf der Eingabe des Benutzers:

var letter = document.getElementById("myInput").value;
var text;
// Wenn der Buchstabe "c" ist
if (letter === "c") {
  text = "Spot on! Good job!";
// Wenn der Buchstabe "b" oder "d" ist
} else if (letter === "b" || letter === "d") {
  text = "Close, but not close enough.";
// Wenn es sich um andere Buchstaben handelt
} else {
  text = "Waaay off..";
}

Probieren Sie es selbst aus

Beispiel

Überprüfen Sie die Eingabedaten:

var x, text;
// Der Wert des Eingabefelds mit id="numb" wird abgerufen
x = document.getElementById("numb").value;
// Wenn x keine Zahl ist oder kleiner als 1 oder größer als 10, wird "input is not valid" ausgegeben
// Wenn x eine Zahl zwischen 1 und 10 ist, wird "Input OK" ausgegeben
if (isNaN(x) || x < 1 || x > 10) {
  text = "Input not valid";
} else {
  text = "Input OK";
}

Probieren Sie es selbst aus

Browser unterstützt

语句 Chrome IE Firefox Safari Opera
if/else Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung

Verwandte Seiten

JavaScript-Tutorial:JavaScript-If...Else-Anweisung

JavaScript-Tutorial:JavaScript-Switch-Anweisung