Ta zapis bo prikazal metode za pridobivanje in nastavitev vrednosti vhodnega besedila v JavaScriptu.
Kako pridobiti in nastaviti vrednost vhodnega besedila v JavaScriptu?
Če želite pridobiti in nastaviti vrednost vhodnega besedila v JavaScriptu, uporabite:
- “ getElementById() ” metoda
- “ getElementByClassName() ” metoda
- “ querySelector() ” metoda
Pojdite skozi vsako od omenjenih metod eno za drugo!
1. način: pridobite in nastavite vrednost vhodnega besedila v JavaScriptu z uporabo metode document.getElementById().
' getElementById() ” dostopa do elementa z navedenim ID-jem. To metodo je mogoče uporabiti za dostop do ID-jev vnosnih polj in gumbov za pridobivanje in nastavitev besedilne vrednosti.
Sintaksa
dokument. getElementById ( elementi )
Tukaj, ' elementi ” se nanaša na podani ID elementa.
Spodnji primer pojasnjuje obravnavani koncept.
Primer
Najprej vključite dve polji za vrsto vnosa in ločena gumba za pridobivanje in nastavitev vrednosti vnosnega besedila z ' onclick ”, ki bodo dostopali do določenih funkcij:
< gumb na klik = 'getText()' > Pridobite vrednost gumb >
< gumb na klik = 'getAndSetText()' > Nastavite vrednost gumb >
< vrsta vnosa = 'besedilo' id = 'setText' ime = 'setText' onclick = 'ta.vrednost = '' ' />
Nato pridobite vrednost vnosnega polja s pomočjo metode document.getElementById():
dokument. getElementById ( 'getText' ) . vrednost = 'Vnesite tukaj' ;Zdaj deklarirajte funkcijo z imenom ' getAndSetText() ”. Tukaj pridobite vnosno polje z ' getText ” id in posredujte vhodno vrednost v naslednje vnosno polje z “ setText ” id:
funkcijo getAndSetText ( ) {je bil setText = dokument. getElementById ( 'getText' ) . vrednost ;
dokument. getElementById ( 'setText' ) . vrednost = setText ;
}
Podobno definirajte funkcijo z imenom ' getText() ”. Po tem pridobite vnosno polje z ' getText ” ID in posredujte določeno vrednost v opozorilno polje za pridobitev vhodne besedilne vrednosti:
funkcijo getText ( ) {je bil getText = dokument. getElementById ( 'getText' ) . vrednost ;
opozorilo ( getText ) ;
}
Izhod
2. način: pridobite in nastavite vrednost vhodnega besedila v JavaScriptu z uporabo metode document.getElementByClassName().
' getElementByClassName() ” dostopa do elementa s pomočjo podanega imena razreda. To metodo lahko podobno uporabimo za dostop do razreda vnosnega polja in gumbov za vnos in nastavitev besedilne vrednosti.
Sintaksa
dokument. getElementsByClassName ( ime razreda )V zgornji sintaksi je » ime razreda ” predstavlja ime razreda elementov.
Primer
Podobno kot v prejšnjem primeru bomo najprej dostopali do prvega vnosnega polja z ' getText ” ime razreda. Nato definirajte funkcijo z imenom ' getAndSetText() ” in pridobi podano vnosno polje na podlagi njegovega imena razreda ter nastavi vrednost v naslednjem vnosnem polju:
funkcijo getAndSetText ( )
{
je bil setText = dokument. getElementByClassName ( 'getText' ) . vrednost ;
dokument. getElementById ( 'setText' ) . vrednost = setText ;
}
Podobno definirajte funkcijo z imenom ' getText() «, dodajte ime razreda prvega vnosnega polja in posredujte določeno vrednost v opozorilno polje za prikaz pridobljene vrednosti:
funkcijo getText ( ) {je bil getText = dokument. getElementByClassName ( 'getText' ) . vrednost ;
opozorilo ( getText ) ;
}
Ta izvedba bo prinesla naslednje rezultate:
3. način: pridobite in nastavite vrednost vhodnega besedila v Javascriptu z uporabo metode “document.querySelector()”
' document.querySelector() ” pridobi prvi e Šel dol ki se ujema s podanim izbirnikom, in metoda addEventListener() lahko izbranemu elementu doda obravnavo dogodkov. Te metode je mogoče uporabiti za pridobitev ID-ja vnosnega polja in gumbov ter zanje uporabiti obravnavo dogodkov.
Sintaksa
dokument. querySelector ( Izbirniki CSS )Tukaj, ' Izbirniki CSS « se nanašajo na enega ali več izbirnikov CSS.
Poglejte naslednji primer.
Primer
Najprej vključite vrste vnosa z njihovimi nadomestnimi vrednostmi in gumbi za pridobivanje in nastavitev vrednosti vnosnega besedila:
< ID gumba = 'dobiti' > DOBITI gumb >
< vrsta vnosa = 'besedilo' id = 'vhodni niz' rezervirano mesto = 'Nastavi vrednost' >
< ID gumba = 'set' > NASTAVI gumb >
Nato pridobite dodana vnosna polja in gumbe z uporabo ' document.querySelector() ” metoda:
pusti gumbGet = dokument. querySelector ( '#dobiti' ) ;naj buttonSet = dokument. querySelector ( '#set' ) ;
pustite getInput = dokument. querySelector ( '#input-get' ) ;
pustite setInput = dokument. querySelector ( '#input-set' ) ;
pusti rezultat = dokument. querySelector ( '#rezultat' ) ;
Nato vključite obravnavo dogodkov z imenom ' kliknite ” za oba gumba, da dobite in nastavite vrednosti:
buttonGet. addEventListener ( 'klik' , ( ) => {rezultat. innerText = getInput. vrednost ;
} ) ;
buttonSet. addEventListener ( 'klik' , ( ) => {
getInput. vrednost = setInput. vrednost ;
} ) ;
Izhod
Razpravljali smo o najpreprostejših metodah za pridobivanje in nastavitev vrednosti vhodnega besedila v JavaScriptu.
Zaključek
Če želite pridobiti in nastaviti vrednost vhodnega besedila v JavaScriptu, uporabite » document.getElementById() ” metoda ali
“ document.getElementByClassName() ” za dostop do določenega vnosnega polja in gumbov na podlagi njihovih ID-jev ali imena razreda in nato nastavite njihove vrednosti. Poleg tega je ' document.querySelector() ” lahko uporabite tudi za pridobivanje in nastavitev vrednosti vhodnega besedila v JavaScript. V tem spletnem dnevniku so razložene metode za pridobivanje in nastavljanje vrednosti vhodnega besedila v JavaScriptu.