Oefening 1: Titel wijzigen

HTML-voorbeeld:

Welkom op mijn website!

Wijzig titel

Opdracht:

Voeg een klik-event toe aan de knop met ID changeTitle.
Wanneer op de knop wordt geklikt, moet de tekst van het <h1>-element worden gewijzigd in: "JavaScript is geweldig!".

Oefening 2: Tekst toevoegen

HTML-voorbeeld:

Dit is een alinea.

Voeg extra tekst toe

Opdracht:

Voeg een klik-event toe aan de knop met ID addText.
Wanneer op de knop wordt geklikt, voeg dan de tekst " Hier is extra tekst!" toe aan de bestaande alinea.

Oefening 3: Achtergrondkleur veranderen

HTML-voorbeeld:

Verander kleur

Opdracht:

Voeg een klik-event toe aan de knop met ID changeColor.
Wanneer op de knop wordt geklikt, verander de achtergrondkleur van de colorBox naar een willekeurige kleur.

Oefening 4: Verberg een element

HTML-voorbeeld:

Je kunt me zien!

Verberg tekst

Opdracht:

Voeg een klik-event toe aan de knop met ID hideText.
Wanneer op de knop wordt geklikt, moet de tekst in de <p> worden verborgen.

Oefening 5: Een lijst-item toevoegen

HTML-voorbeeld:

• Item 1
• Item 2

Voeg item toe

Opdracht:

Voeg een klik-event toe aan de knop met ID addItem.
Wanneer op de knop wordt geklikt, voeg een nieuw <li>-element toe met de tekst: "Nieuw item".

Oefening 6: Tekstkleur veranderen

HTML-voorbeeld:

Klik om mijn kleur te veranderen!

Verander tekstkleur

Opdracht:

Voeg een klik-event toe aan de knop met ID changeTextColor.
Wanneer op de knop wordt geklikt, verander de tekstkleur van de paragraaf naar rood.

Oefening 7: Input uitlezen

HTML-voorbeeld:

Toon tekst

Opdracht:

Voeg een klik-event toe aan de knop met ID showInput.
Wanneer op de knop wordt geklikt, toon de ingevoerde tekst van het input-veld in de <p> met ID output.