Les 1 – Inline onclick
Wat ga je leren?
Je leert hoe je met JavaScript tekst op de pagina kunt veranderen via het onclick-attribuut en document.getElementById().
Theorie
JavaScript kun je direct in een HTML-attribuut schrijven. Het onclick-attribuut voert de code erin uit zodra je op het element klikt:
<button onclick="document.getElementById('bericht').textContent = 'Geklikt!'">
Klik mij
</button>
Twee nieuwe dingen:
document.getElementById('bericht')— zoek het element metid="bericht"op de pagina.textContent = '...'— verander de zichtbare tekst van dat element naar een nieuwe waarde
Predict
Bekijk de startcode in de editor. Beantwoord de vraag hieronder voordat je op Run klikt en de knop in de preview uitprobeert.
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 en blijft verder ongewijzigd.
Probeer het zelf!
Investigate
Experimenteer:
- Verander de tekst
'Je hebt geklikt!'naar iets anders — wat zie je na een klik? - Voeg een tweede knop toe met een andere tekst
- Wat gebeurt er als je
id="bericht"in de<p>verandert naarid="tekst"maar de onclick niet aanpast?
Modify
Opdracht: Voeg een tweede <p id="naam"> toe en laat een tweede knop die tekst veranderen naar jouw naam.
Tip
Maak een nieuwe <p> met een uniek id. Maak een nieuwe <button> met onclick="document.getElementById('naam').textContent = '...'".
Antwoord
<p id="naam">Wat is jouw naam?</p>
<button onclick="document.getElementById('naam').textContent = 'Emma'">
Toon naam
</button>
Make
Opdracht: Bouw een pagina met drie knoppen. Elke knop toont een andere zin in dezelfde <p>. Bedenk zelf welke zinnen je toont — een grap, een quote, of iets anders.
Tip
Je hebt maar één <p> nodig met één id. Alle drie de knoppen verwijzen naar hetzelfde id, maar geven elk een andere waarde aan .textContent.
Antwoord
<p id="zin">Klik een knop.</p>
<button onclick="document.getElementById('zin').textContent = 'Hallo wereld!'">Zin 1</button>
<button onclick="document.getElementById('zin').textContent = 'JavaScript is cool.'">Zin 2</button>
<button onclick="document.getElementById('zin').textContent = 'Dit werkt!'">Zin 3</button>
Er gaat iets mis
ID verkeerd gespeld
<p id="Bericht">Tekst</p>
<button onclick="document.getElementById('bericht').textContent = 'Hoi'">Klik</button>
getElementById is hoofdlettergevoelig. 'Bericht' en 'bericht' zijn twee verschillende ID's. Als het element niet gevonden wordt, gebeurt er niets — of je krijgt een foutmelding in de browser-console (F12). Zorg dat het id in HTML en in onclick precies hetzelfde gespeld is.