Syntaks av OnClick -hendelsen
I HTML
Her kan elementer være en knapp eller noe annet. I OnClick -hendelsen skal vi skrive et manus eller en funksjon. Onclick -hendelsen støtter nesten alle elementer av HTML unntatt , , ,
I JS
gjenstand.onClick = funksjon () script;I JavaScript vil vi tildele en funksjon til OnClick -arrangementet. Inne i parentesen vil vi skrive skriptet for å utføre en oppgave eller funksjon.
Eksempel 1: OnClick -hendelse for å endre tekstfargen
Når vi klikker på en knapp på et nettsted, utløser OnClick -hendelsen en viss oppførsel. Dette kan oppstå når vi sender inn nettskjemaer eller data når vi endrer spesifikt innhold av websiden og andre lignende hendelser. For å øve OnClick-arrangementet i en virkelig verden, vil vi først skrive litt enkel HTML med litt styling.
Vi har laget en enkel HTML -side som det er litt tekst med en knapp. For å stilisere siden har vi brukt noen CSS.
Når vi klikker på knappen, har vi tenkt å gjøre teksten blå.
Etter å ha skrevet JavaScript -metoden for å endre fargen, må vi legge til en OnClick -egenskap til knappen vår. Derfor må vi endre HTML -en vår litt:
Vi har lagt til en OnClick -arrangement inne i knappekoden. Vi har tildelt en funksjon som heter ChangeColor () for å utføre. For resultatet må vi opprette en JS -fil for å skrive den i en JavaScript -fil eller en tag i en HTML -fil. Imidlertid vil vi skrive skriptet vårt i HTML -filen.
Først må vi velge elementet vi ønsker å endre, som er teksten "Endre fargen" som er inneholdt i
stikkord. DOMs GetElementsByClassName (), GetElementById () eller QuerySelector () -metoder i JavaScript kan brukes til å oppnå dette. Verdien blir deretter tilordnet variabelen. Vi vil bruke QuerySelector () i dette eksemplet fordi det er mer oppdatert og raskere. I tillegg vil variablene bli erklært ved bruk av const. Det er tryggere fordi det hjelper å gjøre variabler skrivebeskyttet.
Nå, inne i skriptetoden, vil vi skrive vår funksjon.
Som sett ovenfor i HTML, er funksjonen vi vil bruke ChangeColor (). Dette er grunnen til at ChangeColor er satt som vår funksjonsidentifikator (navn). Det vil ikke fungere hvis navnet samsvarer med det som er i HTML. I DOM for å endre alt relatert til stil, må du skrive "stil" etterfulgt av en prikk (.). Modifiseringen du vil gjøre er deretter laget, som kan være fargen, bakgrunnsfargen, tekststørrelse osv. For å få tilgang til vår "Endre fargen" -teksten, vil vi bruke det deklarerte variabelen Navnet i vår funksjon, så setter vi tekstens farge til blå. Når vi trykker på knappen, endres tekstens farge til blå:
Ved å legge til flere farger i teksten vår, kan vi ta ting et skritt videre:
Så det vi vil gjøre er å gjøre forfatteren oransjerød, grønn og blå. Denne gangen aksepterer OnClick HTML -funksjonene verdiene for fargen vi ønsker å bruke på teksten. I JavaScript blir disse referert til som parametere. Vi konstruerer en funksjon som også aksepterer parametere. Vi kaller dem "farge". Nettstedet vårt har gjennomgått mindre endringer:
Så la oss velge vår "endre farge" -teksten og skriv inn koden for å gjøre den oransjerød, blå og grønn:
Funksjonens kode setter først fargen til det som ble levert til ChangeColor () -anropene i HTML -knappene etter å ha hentet navnevariabelen, som ble brukt til å lagre teksten “Endre fargen.”
Når vi trykker på en av disse knappene (blå, grønn og oransje) vil fargen på teksten endre seg deretter.
Eksempel 2: Lag varsler ved hjelp av OnClick -hendelsen
I dette eksemplet, la oss opprette en eksempler på websidesiden med en knapp ved hjelp av HTML. Når knappen blir trykket, vil vi få en varselmelding øverst på skjermen. For å opprette en webside bruker vi følgende kode:
En webside som består av en knapp vil bli opprettet ved hjelp av denne koden:
Nå må vi skrive en JavaScript -funksjon som vil bli utført for å generere varsler. La oss opprette en funksjon showalert () inne i skriptkodene i samme HTML -kode som følgende:
Så etter å ha skrevet JavaScript -metoden for å endre fargen, må vi legge til en OnClick -egenskap på knappen vår. Derfor må vi endre HTML -en vår litt:
Oppdatering av denne koden vil legge til funksjonalitet til knappen. Når en bruker treffer knappen, fører OnClick -egenskapen på knappen til at showalert () -funksjonen blir utløst. Tastaturbrukere kan også bruke OnClick -hendelsen. Varselet vil også bli sendt hvis en bruker bruker fanen -tasten for å flytte til knappen og deretter trykke Enter.
Som du kan se ovenfor, etter å ha trykket på show -varslingsknappen, fikk vi en varslingsmelding.
For knappelementet kan en ny stil legges til. For å endre knappens utseende når brukere mus over den eller tastaturfanen til den, bruk CSS pseudoklasser (: Hover ,: Focus, and: Active).
Ovennevnte kode vil stilisere en knapp. Det er bare for brukerens opplevelse. Stylisering av knappen vil ikke påvirke knappens funksjonalitet.
Prøv å klikke på knappen etter å ha stylet den. Hvis alt går etter planen, bør det å sveve over knappen føre til en endring i stilen, og som før, skal det å trykke på knappen føre til at varselet vises med den tilpassede teksten som vises. For å sikre at det fungerer for tastaturbrukere også, tester det nå uten mus.
Eksempel 3: OnClick -arrangement for å kopiere teksten
Vi kan også kopiere tekst fra et felt til et annet ved å bruke OnClick -hendelsen og en JavaScript -funksjon. La oss opprette en HTML -side med to inngangstekstfelt slik at vi kan skrive data for å kopiere.
Vi må skrive funksjonen inne i skriptetappene, så vi kan ringe dem ved å bruke OnClick -hendelsen som følger:
Etter å ha oppdatert koden, når du trykker på knappen, vil OnClick -hendelsen ringe funksjonen CopyTXT og teksten til Text1 -feltet vil bli kopiert til Text2 -feltet.
Konklusjon
I denne opplæringen har vi sett at når et element er klikket, gjør OnClick -hendelsen en programmerer å kjøre en JavaScript -funksjon. Vi kan bruke den til mange forskjellige funksjoner, for eksempel advarselsmeldinger og formvalidering osv. Vi implementerte tre eksempler i dette innlegget for å vise deg hvordan du kan endre fargen på tekst, hvordan du lager varsler og hvordan du kopierer tekst fra et felt til et annet ved å bruke OnClick -hendelsen og JavaScript -funksjonene.