JavaScript OnClick

Introduksjon

JavaScript er et kjent programmeringsspråk. Det brukes i mer enn 95% av nettstedene vi samhandler med daglig. Du kan ofte se at på et knapp av en hel side blir en hel side endret, et skjemafelt åpnes, eller en popup-boks vises. Hvordan kan vi implementere slik funksjonalitet og håndtere nettstedets interaksjoner med brukere fra en programmerer/utvikler? Når det gjelder samhandling, gir JavaScript innebygde funksjoner for å kontrollere hendelser på et nettsted.

Det er to typer hendelser i JavaScript:

• Hendelseslytter - lytter og venter på at arrangementet skal få sparken
• Hendelsesbehandler - henrettet når en hendelse får sparken

I denne artikkelen vil du lære om den mest brukte hendelsesbehandleren av JavaScript, ved trykk begivenhet. Det er andre hendelseshåndterere for å sveve over et element eller for tastaturtastene, men i denne artikkelen vil vi fokusere på OnClick -hendelsen.

OnClick -hendelsen brukes til å utføre visse oppgaver med et knapp eller ved å samhandle med et HTML -element.

Vi vil nå vise deg et eksempel for å demonstrere hvordan OnClick -arrangementet fungerer.

Eksempel: Endre tekst ved hjelp av OnClick

I dette eksemplet vil vi endre et utvalg av tekst på klikk på en knapp ved hjelp av OnClick -hendelsen. Først vil vi lage et avsnittsmerke og gi den et ID "avsnitt" for å få tilgang til det senere. Vi oppretter en knapp med OnClick -hendelsen og ringer funksjonen som heter “Endre.”

Linuxhint

Endring!

I skriptfilen oppretter vi en flaggvariabel som lar oss sjekke statusen til teksten i vår HTML -avsnittsmerke. Deretter vil vi skrive en funksjon som definerer "endring" -funksjonen ". I funksjonsdefinisjonen vil vi opprette en "if" uttalelse, der vi vil sjekke statusen ved å bruke flaggvariabelen. Vi vil også endre teksten og endre flagget. Det er et ganske enkelt stykke kode!

var a = 1;
Funksjonsendring ()
if (a == 1)
dokument.getElementById ("Paragraf").indrehtml = "Linuxhint er kjempebra"
a = 0;
annet
dokument.getElementById ("Paragraf").InnerHtml = "Linuxhint"
a = 1;

Greit! Etter å ha skrevet all denne koden, kjører vi koden, flytter til nettleseren vår og klikker på den nyopprettede knappen. Etter å ha klikket på knappen, skal teksten endres fra “Linuxhint” til “Linuxhint er kjempebra.”

Vi kan bruke den samme teknikken hvor som helst for å endre innholdet på nettstedet vårt i henhold til våre behov. Vi kan bruke det til å endre et bilde eller utføre enhver type oppgave som vi kan forestille oss med dette verktøyet.

Konklusjon

Denne artikkelen forklarer hvordan du bruker OnClick -hendelsen. I denne artikkelen lærte du konseptet med OnClick -funksjonen på en praktisk måte. Bruken av OnClick -hendelsen er så enkel, selv en nybegynner kan begynne å jobbe med denne funksjonen. Du kan fortsette å lære, jobbe og få mer erfaring i JavaScript på Linuxhint.com for å ha et bedre grep om dette programmeringsspråket. Tusen takk!