Hvordan angi verdien av et inngangsfelt i JavaScript?

DOM -manipulasjoner ved bruk av JavaScript lar programmereren endre elementene eller til og med attributtene til elementene i en HTML -webside. Å endre verdien av inngangsfeltet er ikke annerledes. Det er to tilnærminger til å endre verdien av et inngangsfelt ved bruk av JavaScript. Disse er:

• Tilordne verdiattributtet til et element noen verdi ved å bruke tildelingsoperatøren “=”
• Ved å bruke SetAttribute () funksjon.

La oss bare hoppe inne i demonstrasjonen av begge disse metodene, men før det trenger vi en HTML -mal for å jobbe med.

Sette opp en HTML -webside

I HTML -filen, legg bare til følgende linjer for å opprette et nytt tekstinngangsfelt med ID "Textfeild1"

Når vi utfører programmet, skal vi til følgende utdata i nettleseren vår:

Vi kan se inputfeltet vårt på skjermen.

Metode 1: Tildel verdien Attributt noen verdi direkte

For dette kommer vi først til å legge til følgende linjer i HTML -filen vår:

Endre verdi

Dette vil legge til en ny knapp under tekstfeltet vårt. Og vi har lagt ved en funksjon på klikket på denne knappen som heter som ChangeValue ():

I skriptfilen skal vi legge til følgende funksjonalitet for å få denne knappen til å fungere:

funksjon ChangeValue ()
TextField = dokument.getElementById ("TextField1");
tekstfelt.verdi = "Metode 1";

Vi får først en henvisning til tekstfeltet vårt ved hjelp av dokumentet.getElementById (). Etter det bruker vi DOT -operatøren for å få verdiskattet og direkte tilordne det en strengverdi. Når vi klikker på denne knappen, får vi følgende utdata:

Som du kan se, kunne vi endre inngangsfeltets verdi ved hjelp av dot-operatøren og verdien attributtet.

Metode 2: Bruke SetAttribute () -funksjonen

For dette skal vi legge til en ny knapp rett under forrige knapp ved å bruke følgende linjer i HTML -filen:

Endring av SetAttribute ()

Som du ser, har vi lagt ved denne knappen med en funksjon som heter som setAttributeChange (). Når vi laster inn denne HTML, får vi følgende webside i nettleseren vår:

Så drar vi inn i skriptfilen og definerer dette setAttributeChange () Endre funksjon som følger:

funksjon setAttributeChange ()
TextField = dokument.getElementById ("TextField1");
tekstfelt.setAttribute ("Verdi", "Metode 2");

I den første linjen får vi en henvisning til tekstfeltet ved å bruke dokument.getElementById () funksjon. Etter det bruker vi Dot-Operator og setAttribute () funksjon for å velge attributtet “verdi”Og gi den en strengverdi som“Metode 2”. Når vi klikker på knappen, får vi følgende utdata:

Som du ser, kunne vi endre verdien av inngangsfeltet ved å bruke SetAttribute () -funksjonen.

Konklusjon

Ved hjelp av DOM -manipulasjoner lar JavaScript oss enkelt endre verdiattributtet til et inngangsfelt inne i en HTML -webside. For dette har vi to forskjellige tilnærminger som fører oss til samme resultat. Vi har elementet.setAttribute () -funksjon som lar oss velge en attributt og gi den en viss verdi etter vårt valg. For det andre har vi muligheten til å velge attributtet ved å bruke "prikkoperatør”Og tilordne den attributtet enhver verdi ved å bruke oppgavoperatøren”=.”