Variabelen

Een variabele is een plek in het geheugen met een naam. Je maakt hem 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; kleine letters, geen spaties)
• = 0: de beginwaarde

Daarna kun je de waarde aanpassen en tonen:

teller = teller + 1;  // voeg 1 toe aan de huidige waarde
document.getElementById('uitvoer').textContent = teller;

Zet de variabele buiten de functie: dan blijft hij bestaan tussen de klikken door en onthoudt hij zijn waarde. Dat onthouden is precies waar variabelen voor zijn.

let of const?

Naast let bestaat const. Het verschil:

• let: de waarde kan veranderen (zoals een teller die optelt)
• const: de waarde blijft constant; na het toekennen mag hij niet meer veranderen

const startwaarde = 0;    // verandert nooit
let teller = startwaarde; // mag wel veranderen
teller = teller + 1;

Vuistregel: gebruik standaard const. Pas als de waarde echt moet kunnen veranderen, gebruik je let.

Predict

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

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

3. Elke klik verhoogt teller met 1 en toont de nieuwe waarde. De variabele onthoudt de vorige stand: hij begint bij 0 en telt op zolang de pagina open staat.

Probeer het zelf.

Editor laden...

Investigate

Experimenteer in het veld hierboven:

• Klik een paar keer en druk dan opnieuw op Run. Waar staat de teller nu — en waarom?
• Verander teller + 1 in teller - 1. Wat gebeurt er bij elke klik?
• Verander let teller = 0; in const teller = 0;. Welke foutmelding zie je in de console na een klik?

Opdracht 1: Andere start, grotere stappen

Pas de startcode aan: de teller begint bij 10 en telt per klik 5 erbij.

Editor laden...

Tip

Er zijn twee getallen om aan te passen: de beginwaarde bij let, en wat er per klik bij komt. Klopt de 0 in de HTML dan nog?

Antwoord

script.js:

let teller = 10;

function telOp() {
  teller = teller + 5;
  document.getElementById('uitvoer').textContent = teller;
  console.log('Teller staat op:', teller);
}

In de HTML zet je de begintekst ook op 10, anders klopt de pagina pas na de eerste klik:

<p id="uitvoer">10</p>

Opdracht 2: Reset-knop

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

Editor laden...

Tip

Schrijf een functie reset() die teller = 0 zet en de <p> bijwerkt. Roep hem aan vanuit een onclick op een nieuwe knop.

Antwoord

HTML-toevoeging:

<button onclick="reset()">Reset</button>

Toevoeging in script.js:

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

Beide functies gebruiken dezelfde variabele teller — daarom staat hij buiten de functies.

Opdracht 3: Score-bijhouder

Bouw een score-bijhouder voor een spelletje. De score staat in de <p> en begint op 0. De knop "+1 punt" telt een punt erbij, de knop "-1 punt" haalt er een af. Log bij elke wijziging de nieuwe score in de console.

Editor laden...

Tip

De knoppen roepen puntErbij() en puntEraf() aan — die twee functies schrijf jij, allebei rond dezelfde variabele score.

Antwoord

let score = 0;

function puntErbij() {
  score = score + 1;
  document.getElementById('score').textContent = score;
  console.log('Score:', score);
}

function puntEraf() {
  score = score - 1;
  document.getElementById('score').textContent = score;
  console.log('Score:', score);
}

De score kan nu ook onder nul komen. Hoe je dat tegenhoudt, leer je in Beslissingen — kom daarna gerust hier terug.

Er gaat iets mis

Variabele binnen de functie declareren

function telOp() {
  let teller = 0;       // Fout: elke klik begint opnieuw bij 0
  teller = teller + 1;
}

Staat let teller = 0 binnen de functie, dan maakt elke klik een verse variabele aan die weer bij 0 begint — de teller komt nooit verder dan 1. Zet variabelen die je wilt onthouden buiten de functie.