Tekst veranderen
In de vorige les zag je dit recept al. Nu zoomen we in op het laatste stuk:
<button onclick="document.getElementById('zin').textContent = 'De zon schijnt.'">Zin 1</button>
textContent is een eigenschap van een element: de zichtbare tekst die erin staat. Met het =-teken geef je die eigenschap een nieuwe waarde, en de pagina verandert meteen mee. De nieuwe tekst zet je tussen aanhalingstekens: 'De zon schijnt.' — zo weet de browser dat het om letterlijke tekst gaat en niet om code.
Lees de regel van links naar rechts als een zin: pak het document → zoek het element met id "zin" → zet de tekst ervan op "De zon schijnt.".
Meerdere knoppen mogen naar hetzelfde element wijzen. Elke knop zet dan zijn eigen tekst in dezelfde <p> — de laatste klik wint.
Predict
Bekijk de startcode: twee knoppen, allebei met getElementById('zin').
Wat staat er in de <p> als je eerst op "Zin 1" en daarna op "Zin 2" klikt?
"Het regent." — elke klik vervangt de hele tekst. De tekst van "Zin 1" wordt niet aangevuld maar overschreven, want = geeft de eigenschap een nieuwe waarde.
Probeer het zelf.
Investigate
Experimenteer in het veld hierboven:
- Klik drie keer achter elkaar op "Zin 1". Verandert er na de eerste klik nog iets?
- Haal de aanhalingstekens rond
'Het regent.'weg en klik op "Zin 2". Wat zie je in de console onder het voorbeeld? - Kun je een knop maken die de
<p>leegmaakt?
Voorspel: je schrijft Document met een hoofdletter D. Welke soort fout geeft de console?
Een TypeError:
JavaScript fout: Uncaught TypeError: Document.getElementById is not a function
Document bestaat wel in JavaScript, maar het is iets anders dan de pagina document, en het kent geen getElementById. Daarom geen ReferenceError (de naam is bekend) maar een TypeError (dit ding kan dat niet).
Opdracht 1: Derde knop
Voeg een derde knop "Zin 3" toe die een eigen zin in dezelfde <p> zet.
Tip
Kopieer een bestaande knop en verander alleen de tekst op de knop en de tekst achter .textContent =. Het id blijft 'zin'.
Antwoord
<button onclick="document.getElementById('zin').textContent = 'Het waait hard.'">Zin 3</button>
Drie knoppen, één element: ze schrijven alle drie naar dezelfde <p id="zin">.
Opdracht 2: Wissen
Voeg een knop "Wis" toe die de tekst in de <p> weer leegmaakt.
Tip
Leeg is ook een waarde: twee aanhalingstekens met niets ertussen.
Antwoord
<button onclick="document.getElementById('zin').textContent = ''">Wis</button>
'' is een lege tekst. De <p> blijft op de pagina staan, maar er staat niets meer in.
Opdracht 3: Smoelenboek
Bouw vanaf een lege pagina een minipagina over jezelf: een <p id="naam"> en een <p id="hobby">, allebei eerst met een vraagteken erin, en twee knoppen die elk het juiste element invullen ("Toon naam" en "Toon hobby").
Tip
Twee elementen, twee id's, twee knoppen. Controleer per knop of het id in de onclick bij het juiste element hoort.
Antwoord
<p id="naam">?</p>
<p id="hobby">?</p>
<button onclick="document.getElementById('naam').textContent = 'Sam'">Toon naam</button>
<button onclick="document.getElementById('hobby').textContent = 'Voetbal'">Toon hobby</button>
Er gaat iets mis
Aanhalingstekens vergeten
<button onclick="document.getElementById('zin').textContent = Hallo">Klik</button>
JavaScript fout: Uncaught ReferenceError: Hallo is not defined
Zonder aanhalingstekens denkt de browser dat Hallo een stukje code is (een naam die ergens gedefinieerd moet zijn), niet een tekst. Zet letterlijke tekst altijd tussen aanhalingstekens: 'Hallo'.
Aanhalingsteken niet gesloten
<button onclick="document.getElementById('zin').textContent = 'Hallo">Klik</button>
JavaScript fout: Uncaught SyntaxError: Invalid or unexpected token
De tekst begint met ' maar houdt nooit op, dus de browser leest door tot het eind van de onclick en snapt er niets meer van. Een "token" is een los stukje code, zoals een woord of een leesteken. Tel je aanhalingstekens: elk stukje tekst heeft er twee.
== in plaats van =: geen melding
<button onclick="document.getElementById('zin').textContent == 'Hallo'">Klik</button>
De console blijft leeg en de tekst verandert niet. Met = geef je iets een nieuwe waarde. Met == vraag je of twee dingen gelijk zijn: de browser vergelijkt de tekst met 'Hallo' en doet verder niets met het antwoord. Daar is niets fout aan, dus er komt geen melding.