JavaScript als...anders
Voorbeeld
Als het uur minder is dan 20, voer dan "Goede dag" uit:
let hour = new Date().getHours();
if (hour < 20) {
document.getElementById("demo").innerHTML = "Good day";
}
Uitgang "Goedendag" of "Goedenavond":
let hour = new Date().getHours();
if (hour < 20) {
greeting = "Good day";
}
else {
greeting = "Good evening";
}
Hieronder meer voorbeelden.
Definitie en gebruik
De instructie if/else voert een codeblok uit als een opgegeven voorwaarde waar is. Als de voorwaarde onwaar is, kan een ander codeblok worden uitgevoerd.
De if/else-instructie maakt deel uit van de "Voorwaardelijke" Statements van JavaScript, die worden gebruikt om verschillende acties uit te voeren op basis van verschillende voorwaarden.
In JavaScript hebben we de volgende voorwaardelijke statements:
- Gebruik if om een codeblok op te geven dat moet worden uitgevoerd, als een opgegeven voorwaarde waar is
- Gebruik else om een codeblok op te geven dat moet worden uitgevoerd, als dezelfde voorwaarde onwaar is
- Gebruik else if om een nieuwe voorwaarde op te geven om te testen, als de eerste voorwaarde onwaar is
- Gebruik schakelaar om een van de vele codeblokken te selecteren die moeten worden uitgevoerd
Syntaxis
De if -instructie specificeert een codeblok dat moet worden uitgevoerd als een voorwaarde waar is:
if (condition) {
// block of code to be executed if the condition is true
}
De else -instructie specificeert een codeblok dat moet worden uitgevoerd als de voorwaarde onwaar is:
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
}
De else if -instructie specificeert een nieuwe voorwaarde als de eerste voorwaarde onwaar is:
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
}
Parameterwaarden
| Parameter | Description |
|---|---|
| condition | Required. An expression that evaluates to true or false |
Meer voorbeelden
Als de tijd minder dan 10:00 is, maak dan een "Goedemorgen"-begroeting, zo niet, maar de tijd is minder dan 20:00 uur, maak dan een "Goedendag"-begroeting, anders een "Goedenavond":
var time = new Date().getHours();
if (time < 10) {
greeting = "Good morning";
}
else if (time < 20) {
greeting = "Good day";
}
else {
greeting = "Good evening";
}
Als het eerste <div>-element in het document een id van "myDIV" heeft, verander dan de lettergrootte:
var x = document.getElementsByTagName("DIV")[0];
if (x.id === "myDIV") {
x.style.fontSize = "30px";
}
Wijzig de waarde van het bronattribuut (src) van een <img>-element, als de gebruiker op de afbeelding klikt:
<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>
Geef een bericht weer op basis van gebruikersinvoer:
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..";
}
Invoergegevens valideren:
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";
}
Gerelateerde pagina's
JavaScript-zelfstudie: JavaScript If...Else-instructies
JavaScript-zelfstudie: JavaScript-schakelverklaring
Browserondersteuning
if...else is een ECMAScript1 (ES1)-functie.
ES1 (JavaScript 1997) wordt volledig ondersteund in alle browsers:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |