Hvordan lage knapp i JavaScript

Utviklere ønsker stort sett at nettsidene deres skal være attraktive og gjøre dem interaktive. For dette formålet legges knapper til nettsiden. For eksempel når det er behov for å sende eller motta data, inkludert klikkhendelser for ekstra funksjonalitet for brukeren mens han registrerer eller logger på en konto. I slike tilfeller lar knapper sluttbrukeren utføre ulike funksjoner smart.

Denne bloggen vil forklare metodene for å lage knapper i JavaScript.

Hvordan lage knapp i JavaScript?

For å lage en knapp i JavaScript kan følgende metoder brukes:

'createElement()' og 'appendChild()'-metodene
'Type'-attributt for 'input'-taggen

Følgende tilnærminger vil demonstrere konseptet én etter én!

Metode 1: Lag knapp i JavaScript ved å bruke metodene 'createElement()' og 'appendChild()'

« createElement() '-metoden oppretter et element, og ' appendChild() ”-metoden legger til et element til det siste underordnede av et element. Disse metodene vil bli brukt for å lage en knapp og legge den til dokumentobjektmodellen (DOM) som henholdsvis må brukes.

Syntaks

dokument. oppretteElement ( type )

element. vedleggChild ( node )

I syntaksen ovenfor, ' type ' refererer til typen element som vil bli opprettet ved hjelp av createElement()-metoden, og ' node ” er noden som vil bli lagt til ved hjelp av appendChild()-metoden.

Følgende eksempel vil forklare det angitte konseptet.

Eksempel

For det første en ' knapp ' vil bli opprettet ved hjelp av document.createElement()-metoden og lagret i en variabel kalt ' opprette-knappen ':

konst opprette-knappen = dokument. oppretteElement ( 'knapp' )

Deretter ' indreTekst ”-egenskapen vil referere til den opprettede knappen og angi tekstverdien til den angitte knappen som følger:

opprette-knappen. indreTekst = 'Klikk på meg'

Til slutt, ' appendChild() ”-metoden vil legge til den opprettede knappen til DOM ved å referere til variabelen den er lagret i som et argument:

dokument. kropp . vedleggChild ( opprette-knappen ) ;

Utdataene fra implementeringen ovenfor vil resultere som følger:

Metode 2: Lag knapp i JavaScript ved å bruke «Type»-attributtet til «input»-taggen

« type ”-attributt representerer typen inndataelement som skal vises. Den kan brukes til å lage en knapp ved å spesifisere ' knapp ” som verdien av typeattributtet til input-taggen.

Syntaks

< inndatatype = 'knapp' >

Her, ' knapp ” indikerer typen av inntastingsfeltet.

Sjekk ut eksemplet nedenfor.

Eksempel

For det første vil vi bruke en input-tag, spesifiser dens type som ' knapp ', og verdi som ' Klikk på meg '. Som et resultat vil en knapp bli opprettet. Videre vil det utløse ' createButton() '-funksjon når du klikker:

< inndatatype = knappen verdi = Klikk_Meg og klikk = 'createButton()' >

I JavaScript-filen vil vi definere ' createButton() ”-funksjon som vil generere en varslingsboks når den tilføyde knappen blir klikket:

funksjon opprette-knappen ( ) {
varsling ( 'Dette er en knapp' )
}

Produksjon

De diskuterte teknikkene for å lage en knapp i JavaScript kan brukes passende i henhold til kravene.

Konklusjon

For å lage en knapp i JavaScript, ' createElement() ' og ' appendChild() ”-metoder kan brukes for å lage en knapp og legge den til som skal brukes i DOM. En annen teknikk som kan brukes til å lage en knapp er å definere en inngangstype og legge til tilhørende funksjonalitet. Denne artikkelen demonstrerte metodene for å lage en knapp i JavaScript.

Hvordan lage knapp i JavaScript