Inhoud

  1. Geen paragrafen H1 - Voorwoord
  2. Geeft paragrafen weer H2 - Wat is JavaScript?
    1. §1. Wat kun je met JavaScript?
    2. §2. De script-tag
    3. §3. Opdrachten
  3. Geeft paragrafen weer H3 - Statements (opdrachten)
    1. §1. Wat zijn statements?
    2. §2. Functie document.write
    3. §3. Commentaar
    4. §4. Functie alert
    5. §5. Opdrachten
  4. Geeft paragrafen weer H4 - Variabelen
    1. §1. Wat is een variabele?
    2. §2. Variabelen maken en gebruiken
    3. §3. Functie prompt
    4. §4. Operatoren
    5. §5. Strings
    6. §6. Opdrachten
  5. Geeft paragrafen weer H5 - Functies
    1. §1. Wat is een functie?
    2. §2. Functies maken en gebruiken
    3. §3. Functies die iets teruggeven
    4. §4. Parameters en argumenten
    5. §5. De scope van variabelen
    6. §6. Expressies
    7. §7. Functie parseInt
    8. §8. Opdrachten
  6. Geeft paragrafen weer H6 - Loops en voorwaardes
    1. §1. Wat zijn loops en voorwaardes?
    2. §2. Het if-else statement
    3. §3. Vergelijkingen en hun operatoren
    4. §4. Functie confirm
    5. §5. Het switch-statement
    6. §6. De while-loop
    7. §7. De for-loop
    8. §8. Stoppen door break
    9. §9. Opdrachten
  7. Geeft paragrafen weer H7 - Events
    1. §1. Wat is een event?
    2. §2. Events maken en gebruiken
    3. §3. Welke events zijn er?
    4. §4. Variabele this
    5. §5. Event-object
    6. §6. Opdrachten
  8. Geeft paragrafen weer H8 - Arrays
    1. §1. Wat is een Array?
    2. §2. Een Array maken en gebruiken
    3. §3. Een Array doorlopen
    4. §4. Een associatieve array
    5. §5. De for-in loop
    6. §6. Opdrachten
  9. Geeft paragrafen weer H9 - Objecten
    1. §1. Wat is een object?
    2. §2. Verschil object en variabele
    3. §3. Eigenschappen
    4. §4. Methodes
    5. §5. Eigenschappen en methodes
    6. §6. Opdrachten
  10. Geeft paragrafen weer H10 - Globale objecten
    1. §1. Het window-object
    2. §2. Het document-object
    3. §3. Het Math-object
    4. §4. Standaard HTML-Element-object
    5. §5. Een HTML-Table-object
    6. §6. Opdrachten

Hoofdstuk 10 - Opdracht 3

De opdracht:

Maak een pagina met daarop jouw naam en ernaast een knopje (of linkje) "Geef details weer". Als daarop geklikt wordt verandert de tekst van dit linkje in "Verberg details" en moet onder jouw naam je geboortedatum en woonplaats verschijnen.
Als er op "Verberg details" geklikt wordt moeten je geboortedatum en woonplaats weer verdwijnen (je naam blijft altijd staan) en moet de tekst op de knop/link weer veranderen in "Geef details weer". Gebruik het style-attribuut om iets te verbergen: style="display:none;". De waarde van display moet op block worden ingesteld om een element weer zichtbaar te maken,

Het antwoord:

Hier moet je dus gebruik maken van een aantal CSS-eigenschappen die je via JavaScript aanpast.
Het href-attribuut v/d link is "#", dit is nodig omdat de browser anders de link volgt in plaats van het onclick-event uit te voeren.

JavaScript:
  1. function showDetails()
  2. {
  3.     // Verander de CSS-eigenschap 'display' van de details naar 'block',
  4.     // ofwel: geef de details weer
  5.     document.getElementById("details").style.display = "block";
  6.  
  7.     // Verander de tekst v/d link
  8.     document.getElementById("show-hide-details").innerHTML = "Verberg details";
  9.  
  10.     // Verander het onclick event v/d link, zodat de volgende keer de details worden verborgen
  11.     document.getElementById("show-hide-details").onclick = hideDetails;
  12. }
  13.  
  14. function hideDetails()
  15. {
  16.     // Verander de CSS-eigenschap 'display' van de details naar 'none',
  17.     // ofwel: verberg de details
  18.     document.getElementById("details").style.display = "none";
  19.  
  20.     // Verander de tekst v/d link
  21.     document.getElementById("show-hide-details").innerHTML = "Geef details weer";
  22.  
  23.     // Verander het onclick event v/d link, zodat de volgende keer de details worden weergegeven
  24.     document.getElementById("show-hide-details").onclick = showDetails;
  25. }
  26.  
  27. // Events intialiseren
  28. function maakEvents()
  29. {
  30.     document.getElementById("show-hide-details").onclick = showDetails;
  31. }
  32. window.onload = maakEvents;
HTML:
  1. Julius Caesar <a href="#" id="show-hide-details">Geef details weer</a>
  2. <div id="details" style="display:none;">
  3.  <b>Geboortedatum:</b> 13 juli 100 v.Chr.<br />
  4.  <b>Woonplaats:</b> Rome
  5. </div>
 
© Mark Kamsma 2011-2024