Datum en/of tijd weergeven

Pas de pagina event.html aan zodat er drie knoppen staan. Elke knop start bij een klik erop een eigen functie.

De eerste knop bestaat reeds en start de functie datumWeergeven().

Schrijf een tweede functie om de lokale tijd weer te geven. Deze functie lijkt als twee druppels water op de eerste functie, maar gebruikt in de plaats van datum.toLocaleDateString() om de datum weer te geven, datum.toLocaleTimeString() om de tijd weer te geven.

Maak een knop Tijd weergeven waarbij de pas geschreven functie bij het aanklikken wordt uitgevoerd.

Maak een derde functie met bijhorende knop om de datum en de tijd weer te geven. Gebruik in de functie voor het weergeven van de datum en de tijd datum.toLocaleString().

De Kop aanpassen

De Kop 1 (h1) bevat nu Datum weergeven. Verander de inhoud van de h1 tag naar Datum en/of tijd weergeven.

Om de kop bij het klikken op een knop aan te passen:

• Geef je aan de kop tag (h1) het id kop.
• Voeg je aan de functie datumWeergeven de volgende opdracht toe:
  • document.getElementById("kop").innerHTML = "Datum weergeven";
  • Verander naargelang de knop waarop geklikt wordt, de kop naar Tijd weergeven of Datum en tijd weergeven.

Javascript afzonderen

Verplaats alle JavaScript code naar een apart bestand en sla dit bestand op als datum.js.

Zorg dat de pagina event.html gebruik maakt van het externe JavaScript bestand datum.js.

Tabbladen

Bij het klikken op een tabblad verschijnt de inhoud van het tabblad en verdwijnt de inhoud van de andere tabbladen.

Met de volgende HTML code maak je een tabblad:

<span style="cursor:pointer" onclick="tabblad1();">HTML </span>