Les 5b
Opdracht 1) Wisselknop
In deze repl staat een pagina met een knop erop en wat tekst.
Schrijf een programma dat twee dingen doet als je op de knop klikt:
De kleur van de tekst "Hieronder staat een knop." wordt geel
De tekst van de knop verandert naar: "Klik niet meer."
Opdracht 2) Telknop
In deze repl staat een pagina met een knop.
Zorg dat je programma het volgende doet:
hou een teller bij voor het aantal keer klikken op de knop
als iemand 3 (of meer) keer op de knop klikt verandert de tekst van de knop in "Stop met klikken!"
Opdracht 3) Verander het plaatje
Fork deze repl en maak een HTML pagina met een plaatje. Stop hier een knop bij die het plaatje bij het drukken van de knop verandert.
HINT: Je kunt een plaatje selecteren op basis van het id en dan het src attribuut attribuut veranderen. Een stukje code
Opdracht 4) Tekst onder het plaatje
Werk verder met de code van "Opdracht 3) Verander het plaatje".
Breid het vorige programma uit zodat de knop die je hebt gemaakt, om de plaatjes te veranderen, ook een tekstje op de pagina zet over de desbetreffende plaatjes. Elke keer als er dus op de knop gedrukt wordt veranderen de plaatjes maar ook de tekst.
Opdracht 5) Klikkerdeklik
Je krijgt nu in deze repl een pagina met een lege paragraaf (met id = "aantalkliks") en een button.
Programmeer de button zodat in de paragraaf te zien is hoe vaak er is geklikt op de button.
Opdracht 6) Waar klik ik?
Als je deze code runt, zie je twee blokjes.
Maak een programma dat detecteert op welk vakje geklikt wordt.
Verander je website zodat er komt te staan:
Waarbij je <nummer> vervangt door 1 of 2.
Last updated