Les 5 - Invoer van de gebruiker - Klikken op een knop
In JavaScript en HTML zijn er verschillende methodes om input van de gebruiker te krijgen. Denk hierbij aan knoppen, dropdowns, sliders, forms, toggle-knoppen etc. Je kan het zo gek nog niet bedenken! Dit alles is zodat de gebruiker informatie kan overdragen en dat daar vervolgens dan wat mee gedaan kan worden.
We beginnen met het volgende voorbeeld:
See the Pen VB eventListener by Jurjenh (@jurjenh) on CodePen.
We maken een knop in html en voegen daar aan in JavaScript aan toe:
knop.addEventListener("click", groet);
Nu blijft de knop wachten tot er op geklikt wordt maar de rest van je programma werkt gewoon verder. Als er op geklikt wordt, wordt de functie groet()
uitgevoerd.
LET OP! bij het toevoegen van een eventListener geven we alleen de naam van de functie mee. We gebruiken dus geen ()-jes. Op het moment dat je klikt gaat de browser dan de functie echt aanroepen.
Note: Opdracht
Maken in Repl.it:
- Oefenopdracht Les 5 - Wisselknop
- Oefenopdracht Les 5 - Telknop
- Oefenopdracht Les 5 - Verander het plaatje
- Oefenopdracht Les 5 - Tekst onder het plaatje
- Inleveropdracht Les 5 - Klikkerdeklik
- Inleveropdracht Les 5 - Waar klik ik?