Les 5 – Variabelen

Wat ga je leren?

Je leert hoe je een waarde opslaat in een variabele, en hoe je die waarde gebruikt en aanpast in je code.

Theorie

Een variabele is een plek in het geheugen met een naam. Je maakt een variabele aan met let, geeft hem een naam, en kent er een waarde aan toe:

let teller = 0;

• let — maakt een nieuwe variabele aan
• teller — de naam (kies zelf, gebruik kleine letters en geen spaties)
• = 0 — de beginwaarde

Je kunt de waarde daarna aanpassen:

teller = teller + 1;  // voeg 1 toe aan de huidige waarde

En je kunt de waarde tonen op de pagina:

document.getElementById('uitvoer').textContent = teller;

Predict

Bekijk de startcode in het script.js-tabblad. Beantwoord de vraag hieronder voordat je op Run klikt.

Wat zie je in de <p> na drie klikken?

Na elke klik wordt teller met 1 verhoogd en op de pagina getoond. Na drie klikken staat er 3. De variabele onthoudt de vorige waarde — hij begint bij 0 en telt op zolang de pagina open is.

Probeer het zelf!

Editor laden...

Investigate

Experimenteer:

• Verander de beginwaarde van teller naar 10 — waar begint de teller dan?
• Verander teller + 1 naar teller + 5 — wat telt hij dan per klik?
• Voeg een tweede knop toe die de teller weer op 0 zet

Modify

Opdracht: Voeg een knop "Reset" toe die de teller terugzet naar 0 en dat ook op de pagina toont.

Tip

Geef de reset-knop een eigen id. Gebruik addEventListener om bij een klik teller = 0 in te stellen en de <p> bij te werken.

Antwoord

HTML-toevoeging:

<button id="reset">Reset</button>

Toevoeging in script.js:

document.getElementById('reset').addEventListener('click', function() {
  teller = 0;
  document.getElementById('uitvoer').textContent = teller;
});

Make

Opdracht: Bouw een eenvoudige score-bijhouder voor een spelletje. Er zijn twee knoppen: "+1 punt" en "-1 punt". De score staat centraal op de pagina. De score mag niet onder 0 komen — als de score al 0 is, doet de min-knop niets.

Tip

Gebruik een if-controle om te checken of de score groter dan 0 is voordat je 1 aftrekt:

if (score > 0) {
  score = score - 1;
}

Antwoord

HTML:

<p id="score">0</p>
<button id="plus">+1 punt</button>
<button id="min">-1 punt</button>

script.js:

let score = 0;

document.getElementById('plus').addEventListener('click', function() {
  score = score + 1;
  document.getElementById('score').textContent = score;
});

document.getElementById('min').addEventListener('click', function() {
  if (score > 0) {
    score = score - 1;
    document.getElementById('score').textContent = score;
  }
});

Er gaat iets mis

Variabele binnen de functie declareren

document.getElementById('knop').addEventListener('click', function() {
  let teller = 0;       // Fout: elke klik reset de teller naar 0!
  teller = teller + 1;
});

Als je let teller = 0 binnen de functie zet, wordt de variabele bij elke klik opnieuw aangemaakt en begint hij altijd bij 0. De teller telt dan nooit verder dan 1. Zet variabelen die je wilt onthouden buiten de functie.

---

← Les 4 – script.js | Les 6 – Events →