Week 2 - Functies en onclick | JavaScript Cheatsheet

Functies (herbruikbare code)#

Wat is een functie?
Een functie is een stukje code dat je kunt hergebruiken. Je schrijft het één keer en gebruikt het zo vaak je wilt of pas wanneer je het nodig hebt.

Functie maken:

function zegHallo() {

                              console.log("Hallo!");

                            }

Functie aanroepen:

zegHallo();

                            // Nu gebeurt het pas!

Onthoud: Functie maken = code opschrijven, aanroepen = code pas gebruiken

Functies met onclick (knop reageert)#

HTML:

<button onclick="zegHallo()">

                              Klik mij

                            </button>

JavaScript:

function zegHallo() {

                              alert("Je
                                klikte!");

                            }

Wat gebeurt er?

Gebruiker klikt op knop
onclick roept functie zegHallo() aan
Alert verschijnt

Tekst veranderen met innerHTML#

HTML:

<p id="tekst">Oude tekst</p>

                            <button onclick="verander()">

                              Verander tekst

                            </button>

JavaScript:

function verander() {

                              document.getElementById("tekst").innerHTML = "Nieuwe tekst!";

                            }

Stijl aanpassen met style#

Kleur veranderen:

function maakRood() {

                      document.getElementById("tekst").style.color = "red";

                    }

Element verbergen/tonen:

function verberg() {

                      document.getElementById("foto").style.display = "none";

                    }


                    function toon() {

                      document.getElementById("foto").style.display = "flex";

                    }

Veel gebruikte style properties:

style.color → tekstkleur
style.backgroundColor → achtergrondkleur
style.display → verbergen/tonen ("none" of "flex"/"block")
style.fontSize → lettergrootte (bijv. "20px")

🔥 Veelgemaakte fouten#

function zegHallo → function zegHallo() (haakjes!)
onclick="zegHallo" → onclick="zegHallo()" (haakjes!)
style.background-color → style.backgroundColor (camelCase)
Functienaam in HTML verschilt van JS → werkt niet!

Debug tips#

Test altijd in de console:

function test() {

                          console.log("Functie
                            werkt!");

                        }

Zie je dit in de console? → Functie werkt
Zie je niks? → Check of onclick goed geschreven is
Check of je id's exact hetzelfde zijn!

Stappenplan Opdracht Dark Mode#

Maak functie darkMode()
Selecteer element met getElementById
Verander style.backgroundColor en style.color
Verberg/toon iconen met style.display
Koppel functie aan knop met onclick