Een knop die iets doet

Dit is je eerste regel JavaScript, en hij staat rechtstreeks in de HTML:

<p id="bericht">Nog niet geklikt.</p>
<button onclick="document.getElementById('bericht').textContent = 'Je hebt geklikt.'">
  Klik mij
</button>

Klik op de knop en de tekst in de <p> verandert. Er gebeuren twee dingen:

• onclick is een HTML-attribuut. De code die erin staat, voert de browser uit zodra je op het element klikt.
• document.getElementById('bericht') zoekt op de pagina het element met id="bericht". Het id is het naamplaatje van een element; getElementById vindt het element dat dat naamplaatje draagt.

Het stukje .textContent = '...' erachter verandert de tekst van het gevonden element. In de volgende les kijk je daar preciezer naar; in deze les draait het om het vinden van het juiste element.

DOM

De browser bewaart alle elementen van je pagina in een boomstructuur, de DOM (Document Object Model). document is de ingang van die boom, en getElementById is een van de manieren om er een element uit op te halen. Alles wat JavaScript op een pagina verandert, verandert het in de DOM.

Predict

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

Wat verandert er als je op de knop klikt, en wat verandert er niet?

De tekst in de <p> verandert van "Nog niet geklikt." naar "Je hebt geklikt.". De knop zelf verandert niet: die voert alleen de code in onclick uit.

Probeer het zelf.

Editor laden...

Onder het voorbeeld staat de console. Loopt je code vast, dan zet de browser daar een rode regel die begint met JavaScript fout:. Gebeurt er niets als je klikt, kijk dan eerst daar.

Na JavaScript fout: Uncaught staat altijd de soort fout. Aan die soort zie je waar je moet zoeken:

Melding	Wat de browser bedoelt	Waar je kijkt
SyntaxError	Ik kan je code niet lezen.	Haakjes, aanhalingstekens, punten
ReferenceError	Deze naam ken ik niet.	Spelling, aanhalingstekens rond tekst
TypeError	Dit ding kan dat niet.	Heb je wel iets gevonden? null betekent: niets.

Investigate

Experimenteer in het veld hierboven:

• Verander de tekst 'Je hebt geklikt.' in iets anders. Wat zie je na een klik?
• Verander id="bericht" in de <p> naar id="tekst", maar laat de onclick staan. Wat gebeurt er nu bij een klik, en wat staat er in de console?
• Geef twee <p>-elementen hetzelfde id en klik. Welke van de twee verandert er?

Voorspel: je haalt de punt vóór textContent weg. Welke soort fout geeft de console?

Een SyntaxError, want getElementById('bericht')textContent is geen JavaScript meer:

JavaScript fout: Uncaught SyntaxError: Unexpected identifier 'textContent'

"Unexpected identifier" betekent: hier verwachtte ik geen naam. De melding noemt het woord waar het misgaat, dus je hoeft alleen vlak ervóór te kijken.

Opdracht 1: Eigen teksten

Pas de startcode aan: de knop heet "Zeg hallo" en na een klik staat er "Hallo allemaal." in de <p>.

Editor laden...

Tip

Er zijn twee teksten om aan te passen: de tekst tussen <button> en </button> (dat is wat op de knop staat) en de tekst achter .textContent = (dat is wat er na de klik verschijnt).

Antwoord

<p id="bericht">Nog niet geklikt.</p>
<button onclick="document.getElementById('bericht').textContent = 'Hallo allemaal.'">
  Zeg hallo
</button>

Opdracht 2: Twee elementen

Voeg een tweede <p id="naam"> toe en een tweede knop die de tekst daarvan verandert naar jouw naam. De eerste knop moet blijven werken.

Editor laden...

Tip

Elke <p> heeft een eigen id nodig. De nieuwe knop gebruikt getElementById('naam'), de oude blijft getElementById('bericht') gebruiken.

Antwoord

Toevoeging onder de bestaande knop:

<p id="naam">Wat is jouw naam?</p>
<button onclick="document.getElementById('naam').textContent = 'Emma'">
  Toon naam
</button>

Twee elementen, twee naamplaatjes: elke knop wijst met zijn eigen id het juiste element aan.

Opdracht 3: Quizvraag

Bouw vanaf een lege pagina een mini-quiz: een <p> met een vraag (bijvoorbeeld "Wat is de hoofdstad van Frankrijk?"), een lege <p> voor het antwoord, en een knop "Toon antwoord" die het antwoord in die tweede <p> zet.

Editor laden...

Tip

Alleen de antwoord-<p> heeft een id nodig: dat is het enige element dat de knop moet kunnen vinden.

Antwoord

<p>Wat is de hoofdstad van Frankrijk?</p>
<p id="antwoord"></p>
<button onclick="document.getElementById('antwoord').textContent = 'Parijs'">
  Toon antwoord
</button>

Er gaat iets mis

Je klikt en er gebeurt niets. De console onder het voorbeeld vertelt je waarom. Dit zijn de meldingen die je in deze les het vaakst ziet.

ID verkeerd gespeld

<p id="Bericht">Tekst</p>
<button onclick="document.getElementById('bericht').textContent = 'Hoi'">Klik</button>

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

getElementById is hoofdlettergevoelig: 'Bericht' en 'bericht' zijn twee verschillende id's. De browser vindt geen element en geeft null terug, "niets". Van niets kun je de tekst niet veranderen. Zorg dat het id in de HTML en in de onclick precies hetzelfde gespeld is.

getElementByID met een hoofdletter D

<button onclick="document.getElementByID('bericht').textContent = 'Hoi'">Klik</button>

JavaScript fout: Uncaught TypeError: document.getElementByID is not a function

De functie heet getElementById, met een kleine d aan het eind. JavaScript kent getElementByID niet en zegt dat het geen functie is.

Dubbele aanhalingstekens binnen de onclick

<button onclick="document.getElementById("bericht").textContent = 'Hoi'">Klik</button>

JavaScript fout: Uncaught SyntaxError: Unexpected end of input

De onclick staat al tussen dubbele aanhalingstekens. Het tweede " sluit het attribuut af, dus de browser ziet als code alleen document.getElementById(. Die zin houdt halverwege op, en dat betekent "Unexpected end of input". Gebruik binnen de onclick enkele aanhalingstekens: 'bericht'.

Haakje vergeten

<button onclick="document.getElementById('bericht'.textContent = 'Hoi'">Klik</button>

JavaScript fout: Uncaught SyntaxError: missing ) after argument list

Na 'bericht' moet het haakje dicht. Een SyntaxError betekent dat de browser je code niet eens kan lezen: er klopt iets aan de schrijfwijze, niet aan wat de code doet.

Een hekje voor het id

<button onclick="document.getElementById('#bericht').textContent = 'Hoi'">Klik</button>

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

In CSS schrijf je #bericht, maar getElementById wil alleen de naam: 'bericht'. Met het hekje zoekt hij een element met id="#bericht", vindt niets en geeft null. Het is dezelfde melding als bij een verkeerd gespeld id, en ook dezelfde oorzaak.

textcontent met een kleine c: geen melding

<button onclick="document.getElementById('bericht').textcontent = 'Hoi'">Klik</button>

De console blijft leeg en de tekst verandert niet. JavaScript maakt zonder te klagen een nieuwe eigenschap textcontent aan, die niemand gebruikt. Een lege console betekent dus niet dat je code klopt. Doet een knop niets en staat er geen fout, controleer dan de hoofdletters: textContent.