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. Opdrachten
  6. Geeft paragrafen weer H6 - Loops en voorwaarden
    1. §1. Wat zijn loops en voorwaarden?
    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. Variabele window.event
    6. §6. Opdrachten
  8. Geeft paragrafen weer H8 - Array
    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. Wat zijn globale objecten?
    2. §2. Het window object
    3. §3. Het document object
    4. §4. Het Math object
    5. §5. Standaard HTML-Element object
    6. §6. Een HTML-Table object
    7. §7. Opdrachten

Hoofdstuk 10 - Opdracht 6

De opdracht:

Maak een webpagina met daarin in een divje (
) met de tekst 'Klik hier'
Zorg ervoor dat elke keer als je op dat divje klikt er een prompt verschijnt die een naam vraagt.
Die naam moet vervolgens in dat divje verschijnen.
Als er nog een keer op het divje geklikt wordt (met nu dus een naam) moet er weer dezelfde prompt verschijnen en de nieuw ingevoerde naam moet achter de vorige naam verschijnen, gescheiden door een komma.

Let op: gebruik geen variabelenamen die gelijk zijn aan een id

Het antwoord:

Zie code.

JavaScript:
  1. function getNaam()
  2. {
  3. // Vraag om de naam
  4. var naam = prompt("Geef een naam:", "");
  5.  
  6. // Als er nog 'Klik hier' in het divje staat, zetten we er enkel de naam in
  7. if(this.innerHTML == "Klik hier")
  8. {
  9. this.innerHTML = naam;
  10. }
  11. else // Zo niet, dan voegen we een komma toe en daarna de naam
  12. {
  13. this.innerHTML = this.innerHTML + ", " + naam;
  14. }
  15. }
  16.  
  17. function maakEvents()
  18. {
  19. document.getElementById("namen").onclick = getNaam;
  20. }
  21. window.onload = maakEvents;

HTML:
  1. <div id="namen">Klik hier</div>