Knapper på websider brukes til å gi interaktiv brukeropplevelse. Som regel, hvis svaret på et knappeklikk ikke krever sending av data til serveren, blir interaksjonen implementert ved hjelp av JavaScript-skript. Metodene for å påkalle den tilsvarende JavaScript-koden kan variere - nedenfor er flere mulige alternativer for knapper av forskjellige typer.
Bruksanvisning
Trinn 1
Hvis visningen av en knapp på en webside er organisert ved hjelp av knappekoden, kan JavaScript-koden plasseres i attributtet onclick. For eksempel som dette: knapp Det er selvfølgelig ikke tilrådelig å legge inn nok kode direkte i knappemerket - det er bedre å utforme den som en funksjon, og bare legge koden for å kalle denne funksjonen inn i onclick-attributtet. For eksempel:
funksjon showAlert () {
varsel ('Knappen klikket!')
}
knapp
Steg 2
Hvis knappen vises gjennom en av inngangskodevariasjonene (send inn, tilbakestill, knapp eller bilde), kan samme onclick-attributt brukes. For eksempel, for en knapp for å tømme skjemafelt (tilbakestille), kan koden se slik ut: Hvis du bare vil at JavaScript skal utføres når du klikker på knappen, og standardhandlingen ikke forekommer, legg deretter til returkommandoen i funksjon eller direkte til onclick-attributtet false. For eksempel:
Trinn 3
Hvis du trenger å organisere et svar på å klikke på en knapp av sendetypen, kan du i tillegg til metoden ovenfor ved hjelp av onclick-attributtet, bruke egenskapene til skjemikoden som denne knappen tilhører. Den tilsvarende funksjonsanropet kan plasseres i onsubmit-attributtet til skjemaet. For eksempel:
Trinn 4
Hvis knappen ikke er et skjemaelement, men bare et grafisk element (img-tag), tillater standardene for det også bruk av onclick-attributtet. For eksempel:
Trinn 5
Hvis knappen er en hyperkobling, bør du ikke bruke attributtene til selve knappen; det er bedre å bruke egenskapene til koblingstaggen. Du kan, som i de forrige alternativene, bruke onclick-taggen. For eksempel: Og du kan erstatte adressen i href-attributtet med en funksjonsanrop. For eksempel slik:
