De script-tag

Tot nu toe schreef je code direct in onclick. Dat werkt voor één regel, maar in Opdracht 2 van Inline stijl zag je al hoe onleesbaar het wordt zodra er meer bij komt:

<!-- Onoverzichtelijk: -->
<button onclick="document.getElementById('a').textContent='X'; document.getElementById('b').style.color='red'; ...">

De oplossing is een functie.

Stap 1: functies

Een functie is een blok code met een naam. Je definieert hem één keer en roept hem daarna aan zo vaak als je wil:

function verander() {
  document.getElementById('bericht').textContent = 'Geklikt.';
  document.getElementById('bericht').style.color = 'green';
}

1. function: het sleutelwoord dat zegt dat hier een functie begint.
2. verander: de naam, die kies je zelf. Geen spaties; gebruik camelCase voor meer woorden (maakKleurRood).
3. (): twee ronde haakjes. Die horen bij elke functie; ze blijven in deze cursus leeg.
4. { ... }: accolades met daartussen de regels code die draaien zodra je de functie aanroept.

Definiëren is nog niet uitvoeren

De code binnen de accolades draait niet vanzelf. Hij draait pas als je de functie aanroept: de naam typen met () erachter.

verander();   // nu draait de code binnenin

In HTML gebeurt dat aanroepen via onclick:

<button onclick="verander()">Klik mij</button>

Naam zonder haakjes vs. mét haakjes

verander (zonder haakjes) is een verwijzing naar de functie — alsof je een telefoonnummer noemt. verander() (mét haakjes) is een aanroep — alsof je dat nummer ook echt belt.

Stap 2: de script-tag

De functie zelf zet je in een <script>-tag, onderaan de <body> — zo bestaan alle HTML-elementen al op het moment dat de code laadt:

<body>
  <p id="bericht">Klik op de knop.</p>
  <button onclick="verander()">Klik mij</button>

  <script>
    function verander() {
      document.getElementById('bericht').textContent = 'Geklikt.';
      document.getElementById('bericht').style.color = 'green';
    }
  </script>
</body>

Predict

Bekijk de startcode in de editor. Beantwoord de vraag voordat je op de knop klikt.

Hoeveel dingen veranderen er tegelijk als je op de knop klikt?

Twee: de tekst én de kleur van de <p>. De functie voert bij een aanroep alle regels binnen de accolades uit, hoeveel het er ook zijn.

Probeer en onderzoek

JavaScript in het HTML-tabblad

In deze les staat de JavaScript-code in een <script>-tag binnenin de HTML. Je vindt de code in het index.html-tabblad, onderaan de <body>.

Probeer eerst zelf, klap dan het antwoord uit.

1. Klik op Run en daarna twee keer op de knop. Verandert er na de eerste klik nog iets? Waarom wel of niet?
   Antwoord

   Na de eerste klik staat er Geklikt. in groen, en bij de tweede klik verandert er niets meer. De functie zet de tekst en de kleur opnieuw op precies dezelfde waarden.
2. Hernoem de functie in de <script>-tag naar veranderTekst, maar laat de onclick staan. Welke foutmelding zie je in de console onder het voorbeeld als je klikt?
   Antwoord

   JavaScript fout: Uncaught ReferenceError: verander is not defined. De knop roept nog steeds verander() aan, maar een functie met die naam bestaat niet meer, dus de tekst op de pagina verandert niet.
3. Zet onderaan de <script>-tag, onder de sluitende } van de functie, een losse regel verander(); en klik op Run. Wat zie je al voordat je op de knop klikt?
   Antwoord

   De tekst staat meteen op Geklikt. in groen. Die regel roept de functie aan zodra de pagina laadt, zonder dat iemand op de knop drukt.
4. Haal de sluitende } van de functie weg en klik op Run. Voorspel eerst: wat staat er in de console, vóór en na een klik op de knop?
   Antwoord

   Al vóór de klik staat er JavaScript fout: Uncaught SyntaxError: Unexpected end of input. Na een klik komt er JavaScript fout: Uncaught ReferenceError: verander is not defined bij. De browser kon de <script> niet lezen en heeft de functie dus nooit gemaakt; de tweede melding volgt uit de eerste. Los bij meer meldingen altijd de bovenste eerst op.

Editor laden...

Opdracht 1: Derde regel

Breid de functie verander() uit: na een klik worden de letters ook groter (style.fontSize).

Editor laden...

Tip

Eén extra regel binnen de accolades, naar het voorbeeld van de twee regels die er al staan.

Antwoord

function verander() {
  document.getElementById('bericht').textContent = 'Geklikt.';
  document.getElementById('bericht').style.color = 'green';
  document.getElementById('bericht').style.fontSize = '2rem';
}

Opdracht 2: Herstel-knop

Voeg een knop "Herstel" toe die de tekst en de kleur terugzet naar de beginwaarden. Schrijf er een eigen functie voor.

Editor laden...

Tip

Een tweede functie herstel() in dezelfde <script>-tag, en een tweede knop met onclick="herstel()". Een lege string ('') verwijdert een inline stijl.

Antwoord

HTML-toevoeging:

<button onclick="herstel()">Herstel</button>

Toevoeging in de <script>-tag:

function herstel() {
  document.getElementById('bericht').textContent = 'Klik op de knop.';
  document.getElementById('bericht').style.color = '';
}

Opdracht 3: Lichtknop

Bouw vanaf een lege pagina een lichtknop: een <p> die begint als "Licht is uit.", een knop "Aan" die de tekst op "Licht is aan." zet en de achtergrond geel maakt, en een knop "Uit" die alles terugzet. Schrijf voor elke knop een aparte functie in een <script>-tag.

Editor laden...

Tip

Gebruik style.backgroundColor voor de achtergrondkleur, en '' om hem weer weg te halen.

Antwoord

<p id="lamp">Licht is uit.</p>
<button onclick="aan()">Aan</button>
<button onclick="uit()">Uit</button>

<script>
  function aan() {
    document.getElementById('lamp').textContent = 'Licht is aan.';
    document.getElementById('lamp').style.backgroundColor = 'yellow';
  }

  function uit() {
    document.getElementById('lamp').textContent = 'Licht is uit.';
    document.getElementById('lamp').style.backgroundColor = '';
  }
</script>

Er gaat iets mis

<script>-tag staat vóór de HTML-elementen

<head>
  <script>
    function verander() {
      document.getElementById('bericht').textContent = 'Hoi';
    }
    verander();   // Fout: dit draait meteen, de <p> bestaat nog niet
  </script>
</head>
<body>
  <p id="bericht">Tekst</p>
</body>

JavaScript fout: Uncaught TypeError: Cannot set properties of null (setting 'textContent')

De aanroep verander(); draait zodra de browser de <script>-tag in de <head> tegenkomt — en op dat moment is de <body> nog niet geladen, dus getElementById geeft null. Alleen de functie definiëren in de <head> is niet erg (die draait pas later), maar code die meteen een element aanraakt wel. Zet de <script>-tag daarom onderaan de <body>, na alle HTML-elementen. In script.js zie je hoe je dit met defer ook vanuit de <head> oplost.

Functienaam verschilt tussen onclick en <script>

<button onclick="veranderTekst()">Klik</button>

<script>
  function verander() {
    document.getElementById('bericht').textContent = 'Hoi';
  }
</script>

JavaScript fout: Uncaught ReferenceError: veranderTekst is not defined

De knop roept veranderTekst aan, maar de functie heet verander. "Is not defined" betekent: deze naam ken ik niet. Kijk bij deze melding of de naam in de onclick letter voor letter gelijk is aan de naam achter function, hoofdletters meegeteld.