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

var auto = document.getElementById("auto");

auto.src = "url van je eigen autoplaatje"; 

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:

Je hebt geklikt op nummer: <nummer>

Waarbij je <nummer> vervangt door 1 of 2.