JavaScript, wenn ... sonst
Beispiel
Wenn die Stunde kleiner als 20 ist, gib "Guten Tag" aus:
let hour = new Date().getHours();
if (hour < 20) {
document.getElementById("demo").innerHTML = "Good day";
}
Ausgabe „Guten Tag“ oder „Guten Abend“:
let hour = new Date().getHours();
if (hour < 20) {
greeting = "Good day";
}
else {
greeting = "Good evening";
}
Weitere Beispiele unten.
Definition und Verwendung
Die if/else-Anweisung führt einen Codeblock aus, wenn eine angegebene Bedingung wahr ist. Wenn die Bedingung falsch ist, kann ein weiterer Codeblock ausgeführt werden.
Die if/else-Anweisung ist ein Teil der „bedingten“ Anweisungen von JavaScript, die verwendet werden, um verschiedene Aktionen basierend auf verschiedenen Bedingungen auszuführen.
In JavaScript haben wir die folgenden bedingten Anweisungen:
- Verwenden Sie if , um einen Codeblock anzugeben, der ausgeführt werden soll, wenn eine bestimmte Bedingung wahr ist
- Verwenden Sie else , um einen Codeblock anzugeben, der ausgeführt werden soll, wenn dieselbe Bedingung falsch ist
- Verwenden Sie else if , um eine neue Bedingung anzugeben, die getestet werden soll, wenn die erste Bedingung falsch ist
- Verwenden Sie den Schalter , um einen von vielen auszuführenden Codeblöcken auszuwählen
Syntax
Die if -Anweisung gibt einen Codeblock an, der ausgeführt werden soll, wenn eine Bedingung wahr ist:
if (condition) {
// block of code to be executed if the condition is true
}
Die else -Anweisung gibt einen Codeblock an, der ausgeführt werden soll, wenn die Bedingung falsch ist:
if (condition) {
// block of code to be executed if the condition is true
}
else {
// block of code to be executed if the condition is false
}
Die else if- Anweisung gibt eine neue Bedingung an, wenn die erste Bedingung falsch ist:
if (condition1) {
// block of code to be executed if condition1 is true
}
else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}
Parameterwerte
| Parameter | Description |
|---|---|
| condition | Required. An expression that evaluates to true or false |
Mehr Beispiele
Wenn die Uhrzeit unter 10:00 Uhr liegt, erstellen Sie eine „Guten Morgen“-Begrüßung, wenn nicht, aber die Uhrzeit unter 20:00 Uhr liegt, erstellen Sie eine „Guten Tag“-Begrüßung, ansonsten einen „Guten Abend“:
var time = new Date().getHours();
if (time < 10) {
greeting = "Good morning";
}
else if (time < 20) {
greeting = "Good day";
}
else {
greeting = "Good evening";
}
Wenn das erste <div>-Element im Dokument die ID „myDIV“ hat, ändern Sie seine Schriftgröße:
var x = document.getElementsByTagName("DIV")[0];
if (x.id === "myDIV") {
x.style.fontSize = "30px";
}
Ändern Sie den Wert des Quellattributs (src) eines <img>-Elements, wenn der Benutzer auf das Bild klickt:
<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>
Zeigen Sie eine Nachricht basierend auf Benutzereingaben an:
var letter = document.getElementById("myInput").value;
var text;
// If the letter is "c"
if (letter === "c") {
text = "Spot on! Good job!";
// If the letter is "b" or "d"
} else if (letter === "b" || letter === "d") {
text = "Close, but not close enough.";
// If the letter is anything else
} else {
text = "Waaay off..";
}
Eingabedaten validieren:
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than 1 or greater than 10, output "input is not valid"
// If x is a number between 1 and 10, output "Input OK"
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
Verwandte Seiten
JavaScript-Tutorial: If...Else-Anweisungen in JavaScript
JavaScript-Tutorial: JavaScript-Switch-Anweisung
Browser-Unterstützung
if...else ist eine ECMAScript1 (ES1)-Funktion.
ES1 (JavaScript 1997) wird in allen Browsern vollständig unterstützt:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |