Ovaj zapis će pokazati metode za dobivanje i postavljanje ulaznih tekstualnih vrijednosti u JavaScriptu.
Kako dobiti i postaviti vrijednost unosa teksta u JavaScriptu?
Da biste dobili i postavili vrijednost unosa teksta u JavaScriptu, upotrijebite:
- “ getElementById() ” metoda
- “ getElementByClassName() ” metoda
- “ querySelector() ” metoda
Prođite kroz svaku od navedenih metoda jednu po jednu!
Metoda 1: Dohvaćanje i postavljanje ulazne tekstualne vrijednosti u JavaScriptu pomoću metode document.getElementById()
' getElementById() ” metoda pristupa elementu s navedenim ID-om. Ova se metoda može primijeniti za pristup ID-ovima polja za unos i gumbima za dobivanje i postavljanje tekstualne vrijednosti.
Sintaksa
dokument. getElementById ( elementi )
Ovdje, ' elementi ” odnosi se na navedeni ID elementa.
Donji primjer objašnjava razmatrani koncept.
Primjer
Prvo, uključite dva polja vrste unosa i zasebne gumbe za dobivanje i postavljanje vrijednosti teksta unosa s ' na klik ” događaja koji će pristupiti navedenim funkcijama:
< gumb na klik = 'getText()' > Ostvarite vrijednost dugme >
< gumb na klik = 'getAndSetText()' > Postavite vrijednost dugme >
< vrsta unosa = 'tekst' iskaznica = 'postaviTekst' Ime = 'postaviTekst' na klik = 'this.value = '' ' />
Zatim uz pomoć metode document.getElementById() dohvatite vrijednost polja za unos:
dokument. getElementById ( 'getText' ) . vrijednost = 'Unesi ovdje' ;Sada deklarirajte funkciju pod nazivom ' getAndSetText() ”. Ovdje dohvatite polje za unos s ' getText ” id i proslijedite vrijednost unosa u sljedeće polje za unos s “ setText ' iskaznica:
funkcija getAndSetText ( ) {bio je setText = dokument. getElementById ( 'getText' ) . vrijednost ;
dokument. getElementById ( 'setText' ) . vrijednost = setText ;
}
Slično, definirajte funkciju pod nazivom ' getText() ”. Nakon toga, dobijte polje za unos s ' getText ” id i proslijedite određenu vrijednost u okvir upozorenja za dobivanje ulazne tekstualne vrijednosti:
funkcija getText ( ) {bio je getText = dokument. getElementById ( 'getText' ) . vrijednost ;
uzbuna ( getText ) ;
}
Izlaz
Metoda 2: Dohvaćanje i postavljanje ulazne tekstualne vrijednosti u JavaScriptu pomoću metode document.getElementByClassName()
' getElementByClassName() ” metoda pristupa elementu uz pomoć navedenog naziva klase. Ova se metoda, na sličan način, može primijeniti za pristup klasi polja za unos i gumbima za unos i postavljanje tekstualne vrijednosti.
Sintaksa
dokument. getElementsByClassName ( ime klase )U gornjoj sintaksi, ' ime klase ” predstavlja naziv klase elemenata.
Primjer
Slično prethodnom primjeru, prvo ćemo pristupiti prvom polju za unos s ' getText ” naziv klase. Zatim definirajte funkciju pod nazivom ' getAndSetText() ” i dobijte navedeno polje za unos na temelju naziva njegove klase i postavite vrijednost u sljedeće polje za unos:
funkcija getAndSetText ( )
{
bio je setText = dokument. getElementByClassName ( 'getText' ) . vrijednost ;
dokument. getElementById ( 'setText' ) . vrijednost = setText ;
}
Isto tako, definirajte funkciju pod nazivom ' getText() ”, dodajte naziv klase prvog polja za unos i proslijedite određenu vrijednost u okvir upozorenja za prikaz dohvaćene vrijednosti:
funkcija getText ( ) {bio je getText = dokument. getElementByClassName ( 'getText' ) . vrijednost ;
uzbuna ( getText ) ;
}
Ova implementacija će dati sljedeće rezultate:
Metoda 3: Dohvaćanje i postavljanje ulazne tekstualne vrijednosti u Javascriptu pomoću metode “document.querySelector()”
' document.querySelector() ” dohvaća prvi e otišao dolje koji odgovara navedenom selektoru, a metoda addEventListener() može dodati rukovatelj događajem odabranom elementu. Ove se metode mogu primijeniti za dobivanje ID-a polja za unos i gumba i na njih primijeniti rukovatelja događajima.
Sintaksa
dokument. querySelector ( CSS selektori )Ovdje, ' CSS selektori ” odnosi se na jedan ili više CSS selektora.
Pogledajte sljedeći primjer.
Primjer
Prvo uključite vrste unosa s njihovim vrijednostima rezerviranog mjesta i gumbima za dobivanje i postavljanje vrijednosti teksta unosa:
< id gumba = 'dobiti' > DOBITI dugme >
< vrsta unosa = 'tekst' iskaznica = 'ulazni skup' rezerviranog mjesta = 'Postavi vrijednost' >
< id gumba = 'set' > SET dugme >
Zatim dohvatite dodana polja za unos i gumbe pomoću ' document.querySelector() ” metoda:
neka buttonGet = dokument. querySelector ( '#dobiti' ) ;neka buttonSet = dokument. querySelector ( '#set' ) ;
neka getInput = dokument. querySelector ( '#input-get' ) ;
neka setInput = dokument. querySelector ( '#input-set' ) ;
neka rezultat = dokument. querySelector ( '#proizlaziti' ) ;
Zatim uključite rukovatelja događajima pod nazivom ' klik ” za oba gumba za dobivanje i postavljanje vrijednosti, redom:
buttonGet. addEventListener ( 'klik' , ( ) => {proizlaziti. unutarnjiTekst = getInput. vrijednost ;
} ) ;
buttonSet. addEventListener ( 'klik' , ( ) => {
getInput. vrijednost = setInput. vrijednost ;
} ) ;
Izlaz
Raspravljali smo o najjednostavnijim metodama za dobivanje i postavljanje vrijednosti ulaznog teksta u JavaScriptu.
Zaključak
Da biste dobili i postavili vrijednost unosa teksta u JavaScriptu, upotrijebite ' document.getElementById() ” metoda ili
“ document.getElementByClassName() ” metoda za pristup navedenom polju za unos i gumbima na temelju njihovih ID-ova ili naziva klase, a zatim postavite njihove vrijednosti. Štoviše, ' document.querySelector() ” također se može koristiti za dobivanje i postavljanje vrijednosti ulaznog teksta u JavaScriptu. Ovaj blog objasnio je metode dobivanja i postavljanja ulaznih tekstualnih vrijednosti u JavaScriptu.