Beslissingen met if/else

Tot nu toe deed je code altijd hetzelfde. Vaak wil je een andere actie afhankelijk van een waarde: "als de score boven 10 is, toon dan…". Dat schrijf je met een if-statement:

if (score > 10) {
  document.getElementById('uitvoer').textContent = 'Gewonnen.';
}

Tussen de haakjes staat een voorwaarde: een expressie die true of false oplevert, precies wat je in Vergelijken leerde. Is de voorwaarde true, dan voert JavaScript de regels tussen { ... } uit; anders slaat hij het blok over.

else: anders dit

Met else geef je het alternatief voor wanneer de voorwaarde niet waar is:

if (score > 10) {
  document.getElementById('uitvoer').textContent = 'Gewonnen.';
} else {
  document.getElementById('uitvoer').textContent = 'Niet genoeg punten.';
}

Precies één van de twee blokken draait — nooit allebei.

else if: meerdere opties

Voor meer dan twee gevallen zet je er else if-takken tussen:

let cijfer;

if (score >= 90) {
  cijfer = 'A';
} else if (score >= 70) {
  cijfer = 'B';
} else if (score >= 50) {
  cijfer = 'C';
} else {
  cijfer = 'Onvoldoende';
}

JavaScript probeert de voorwaarden van boven naar beneden en stopt bij de eerste die true is. De regel let cijfer; maakt de variabele alvast aan zonder waarde; precies één van de takken vult hem daarna.

Predict

Wat verschijnt er op de pagina als deze code draait?

const leeftijd = 16;

if (leeftijd >= 18) {
  document.getElementById('uitvoer').textContent = 'Je mag stemmen.';
} else {
  document.getElementById('uitvoer').textContent = 'Nog even wachten.';
}

Welke van de twee zinnen wordt het?

Nog even wachten. De voorwaarde 16 >= 18 is false, dus JavaScript slaat het if-blok over en voert het else-blok uit.

Probeer het zelf.

Editor laden...

Investigate

Experimenteer in het veld hierboven:

• Vul 95 in. En daarna 45. Kloppen de cijfers met de grenzen in de code?
• Vul precies 50 in. Welke tak wint, en waarom die?
• Wissel de volgorde om: zet de tak met score >= 50 bovenaan. Wat krijg je nu bij 95? Verklaar het.

Opdracht 1: Extra grens

Voeg een grens toe voor score >= 30 met de waarde 'Bijna'. Onder de 30 blijft het 'Onvoldoende'.

Editor laden...

Tip

Een extra else if tussen score >= 50 en de laatste else. Houd de volgorde van hoog naar laag.

Antwoord

if (score >= 90) {
  cijfer = 'A';
} else if (score >= 70) {
  cijfer = 'B';
} else if (score >= 50) {
  cijfer = 'C';
} else if (score >= 30) {
  cijfer = 'Bijna';
} else {
  cijfer = 'Onvoldoende';
}

Opdracht 2: Quizvraag met feedback

Maak van de startcode een quizvraag: vraag met een prompt "Wat is de hoofdstad van Nederland?" en toon op de pagina "Goed." als het antwoord amsterdam is, en anders "Fout. Het juiste antwoord is Amsterdam."

Editor laden...

Tip

Eén if met === en één else. Het antwoord is tekst, dus hier geen Number().

Antwoord

function bepaalCijfer() {
  const antwoord = prompt('Wat is de hoofdstad van Nederland?');

  if (antwoord === 'amsterdam') {
    document.getElementById('uitvoer').textContent = 'Goed.';
  } else {
    document.getElementById('uitvoer').textContent = 'Fout. Het juiste antwoord is Amsterdam.';
  }
}

document.getElementById('knop').addEventListener('click', bepaalCijfer);

Typt iemand Amsterdam met een hoofdletter, dan telt dat nu als fout — strings vergelijken is hoofdlettergevoelig (zie Vergelijken).

Opdracht 3: Weer-adviseur

Bouw een weer-adviseur. Vraag de temperatuur met een prompt en toon hem op de pagina, met daaronder het advies:

• warmer dan 25: "Drink genoeg water."
• 15 tot en met 25: "Lekker weer."
• 5 tot en met 14: "Trek een jas aan."
• onder de 5: "Sjaal en muts mee."

Editor laden...

Tip

Vier takken, van warm naar koud. Als temp > 25 al niet waar was, weet je bij de volgende tak dat de temperatuur hoogstens 25 is — je hoeft alleen nog de ondergrens te checken. Schrijf een functie geefAdvies en koppel hem met addEventListener aan de knop.

Antwoord

function geefAdvies() {
  const temp = Number(prompt('Hoeveel graden is het?'));
  let advies;

  if (temp > 25) {
    advies = 'Drink genoeg water.';
  } else if (temp >= 15) {
    advies = 'Lekker weer.';
  } else if (temp >= 5) {
    advies = 'Trek een jas aan.';
  } else {
    advies = 'Sjaal en muts mee.';
  }

  document.getElementById('temp').textContent = 'Temperatuur: ' + temp + ' graden';
  document.getElementById('advies').textContent = advies;
}

document.getElementById('knop').addEventListener('click', geefAdvies);

Er gaat iets mis

Toekenning (=) in plaats van vergelijking (===)

if (score = 10) {   // Fout: één =-teken
  // ...
}

Eén =-teken kent toe in plaats van vergelijkt. Deze regel zet score op 10 en geeft die 10 terug — en dat telt in JavaScript als true. Het if-blok draait dus altijd, wat de oorspronkelijke waarde ook was.

Schrijf voor een vergelijking altijd === (drie tekens). De editor of een linter waarschuwt vaak voor deze fout; neem die waarschuwing serieus.