Klikk på knapper

For at nettsiden skal reagere på det brukeren gjør, bruker vi mange forskjellige hendelser (events). En av de vanligste hendelsene er onclick, som betyr "når man klikker".

Hvordan koble kode til en knapp

For å få en knapp til å gjøre noe, legger vi til onclick-attributtet på knappen. Vi kobler dette til navnet på en kodeblokk (en funksjon) som skal kjøres.

Du kan tenke på en funksjon rett og slett som et navn vi gir til en blokk med kode, slik at vi kan "kalle på den" (kjøre den) når vi trenger det – for eksempel når noen klikker på en knapp.

Navnet til funksjonen kan vi velge selv, men det er vanlig å bruke et navn som beskriver hva funksjonen gjør og det gjelder de samme reglene som med variabler.

function minKode() {
// Koden som skal kjøres når man klikker
}

<button type="button" onclick={minKode}> Klikk
                    meg </button>

Når knappen trykkes, vil koden inni minKode kjøres. Det er her vi endrer variabler og bruker f.eks. if/else eller løkker

Prøv selv

Her er et eksempel hvor vi teller klikk og endrer en beskjed basert på antallet.

Antall klikk: 0

Beskjed: Du har ikke klikket ennå.

let antallKlikk = 0;
 let beskjed = "Du har ikke klikket ennå.";

function behandleKlikk() {
antallKlikk = antallKlikk + 1;

 if (antallKlikk >= 10) {
 beskjed = "Wow, det var mange klikk!";
 } else if (antallKlikk
                    >= 5) {
 beskjed = "Godt jobbet...";
 } else {
 beskjed = "Klikk mer!";
 }
}