Opdracht 9: JavaScript DOM manipulatie
Javascript

DOM is een ander woord voor je HTML document zoals je browser ‘m ziet. Met JavaScript kun je de DOM aanpassen (manipuleren). In deze opdracht oefen je een paar hele kleine DOM manipulaties. De basis is altijd het selecteren van één of meerdere objecten en daar de eigenschappen van aanpassen.

Deel 1: Opdracht opzetten

  1. Maak een nieuwe map dom-manipulatie, vul deze map met 2 bestanden: index.html &, scripts.js.
  2. Stel GIT in zoals je hebt geleerd bij opdracht 4. Stappen 5 en 6 kun je overslaan. Voer ook al je eerste commit uit.
  3. Vul index.html met een leeg HTML document zoals je hebt geleerd in opdracht 3. Vergeet niet scripts.js te linken onderaan de <body>.
  4. Verander de inhoud van het <title> element naar Opdracht 8 – JavaScript DOM manipulatie.

Deel 2: DOM manipulatie

  1. Maak een <button> element met de tekst Click me! en daaronder een leeg <h1> element in je HTML document.
  2. Sla je naam op in een variabele in je JavaScript bestand.
  3. Zorg ervoor dat de tekst in het <h1> element verandert in Hi [jouw naam]! zodra je op de knop klikt.
  4. Maak een array met vijf kleuren in het engels erin.
  5. Zorg ervoor dat de tekst van het <h1> element naar een willekeurige kleur verandert zodra je op de knop klikt.

Tip: Zie https://www.w3schools.com/jsref/event_onclick.asp