JavaScript if/else-statement

Definitie en gebruik

De if/else-statement voert een codeblok uit wanneer de gespecificeerde voorwaarde waar is. Als de voorwaarde vals is, kan een ander codeblok worden uitgevoerd.

De if/else-statement is een onderdeel van de "voorwaardelijke" statements in JavaScript, gebruikt om verschillende acties uit te voeren op basis van verschillende voorwaarden.

In JavaScript hebben we de volgende voorwaardelijke statements:

  • Gebruik if om het codeblok te specificeren dat moet worden uitgevoerd als de gespecificeerde voorwaarde waar is
  • Gebruik else om het codeblok te specificeren dat moet worden uitgevoerd als dezelfde voorwaarde vals is
  • Gebruik else if om een nieuwe te testen voorwaarde te specificeren als de eerste voorwaarde vals is
  • Gebruik switch om een van de meerdere codeblokken die moeten worden uitgevoerd te kiezen

Voorbeeld

Als de huidige tijd (HOUR) kleiner is dan 20:00, wordt "Good day" weergegeven in het element met id="demo":

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

probeer het zelf

Er zijn meer TIY-exempelen onder de pagina.

Syntaxis

De if-statement specificeert de codeblokken die moeten worden uitgevoerd wanneer de voorwaarde waar is:

if (condition) {
  // Codeblok dat wordt uitgevoerd als de conditie true is
}

De else-statement specificeert de codeblokken die moeten worden uitgevoerd als de conditie vals is:

if (condition) {
  // Codeblok dat wordt uitgevoerd als de conditie true is
} else { 
  // Codeblok dat wordt uitgevoerd als de conditie false is
}

Als de eerste conditie vals is, specificeer dan een nieuwe conditie in de else if-statement:

if (condition1) {
  // Codeblok dat wordt uitgevoerd als condition1 true is
} else if (condition2) {
  // Codeblok dat wordt uitgevoerd als condition1 false is en condition2 true is
} else {
  // Codeblok dat wordt uitgevoerd als condition1 en condition2 beide false zijn
}

Parameterwaarde

Parameter Beschrijving
condition Verplicht. Een expressie die true of false oplevert.

Technische details

JavaScript versie: ECMAScript 1

Meer voorbeelden

Voorbeeld

Als de tijd kleiner is dan 20:00, maak dan een "Good day" groet aan, anders maak dan een "Good evening" groet:

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

probeer het zelf

Voorbeeld

Als de tijd kleiner is dan 10:00, maak dan een "Good morning" groet aan, als dat niet het geval is, maar de tijd kleiner is dan 20:00, maak dan een "Good day" groet aan, anders maak dan een "Good evening" groet:

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

probeer het zelf

Voorbeeld

Als de id van het eerste <div>-element in het document "myDIV" is, wijzig dan de lettergrootte ervan:

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

probeer het zelf

Voorbeeld

Wanneer de gebruiker op het afbeelding klikt, wijzig de waarde van de bronkenmerken (src) van het <img>-element:

<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>

probeer het zelf

Voorbeeld

Toon bericht op basis van gebruikersinvoer:

var letter = document.getElementById("myInput").value;
var text;
// Als het letter is "c"
if (letter === "c") {
  text = "Spot on! Good job!";
// Als het letter is "b" of "d"
} else if (letter === "b" || letter === "d") {
  text = "Close, but not close enough.";
// Als het een andere letter is
} else {
  text = "Waaay off..";
}

probeer het zelf

Voorbeeld

Gegevens validatie:

var x, text;
// De waarde van het invoerveld met id="numb" ophalen
x = document.getElementById("numb").value;
// Als x geen getal is of kleiner dan 1 of groter dan 10, dan wordt "input is not valid" weergegeven
// Als x een getal is tussen 1 en 10, dan wordt "Input OK" weergegeven
if (isNaN(x) || x < 1 || x > 10) {
  text = "Input not valid";
} else {
  text = "Input OK";
}

probeer het zelf

browser ondersteunt

语句 Chrome IE Firefox Safari Opera
if/else Support Support Support Support Support

Related pages

JavaScript tutorial:JavaScript If...Else statement

JavaScript tutorial:JavaScript Switch statement