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 en onderzoek

Probeer eerst zelf, klap dan het antwoord uit.

1. Klik op Run en dan drie keer achter elkaar op Zin 1. Verandert er na de eerste klik nog iets?
   Antwoord

   Nee. De eerste klik zet De zon schijnt. in de <p>, en elke volgende klik zet er precies dezelfde tekst in. Je ziet dus geen verschil.
2. Haal de aanhalingstekens rond 'Het regent.' weg, klik op Run en dan op Zin 2. Wat zie je in de console onder het voorbeeld?
   Antwoord

   JavaScript fout: Uncaught SyntaxError: Unexpected identifier 'regent'. Zonder aanhalingstekens leest de browser Het regent als code, en daar snapt hij niets van. De tekst in de <p> blijft staan.
3. Maak een knop die de <p> leegmaakt. Wat zet je achter textContent =?
   Antwoord

   Twee aanhalingstekens zonder iets ertussen: <button onclick="document.getElementById('zin').textContent = ''">Wis</button>. Na een klik is de <p> leeg, en de knoppen schuiven omhoog naar de plek waar de tekst stond.
4. Schrijf in de knop Zin 1 Document met een hoofdletter D, klik op Run en dan op Zin 1. Voorspel eerst: welke soort fout geeft de console?
   Antwoord

   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).

Editor laden...

Opdracht 1: Derde knop

Voeg een derde knop "Zin 3" toe die een eigen zin in dezelfde <p> zet.

Editor laden...

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.

Editor laden...

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").

Editor laden...

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.