Oefening 1: Titel wijzigen

HTML-voorbeeld:

<h1 id="title">Welkom op mijn website!</h1>
<button id="changeTitle">Wijzig titel</button>

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:

<p id="paragraph">Dit is een alinea.</p>
<button id="addText">Voeg extra tekst toe</button>

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:

<div id="colorBox" style="width: 200px; height: 200px; background-color: lightblue;"></div>
<button id="changeColor">Verander kleur</button>

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:

<p id="text">Je kunt me zien!</p>
<button id="hideText">Verberg tekst</button>

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:

<ul id="itemList">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<button id="addItem">Voeg item toe</button>

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:

<p id="coloredText">Klik om mijn kleur te veranderen!</p>
<button id="changeTextColor">Verander tekstkleur</button>

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:

<input type="text" id="userInput" placeholder="Typ hier iets">
<button id="showInput">Toon tekst</button>
<p id="output"></p>

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.