Tento zápis demonštruje metódy na získanie a nastavenie vstupných textových hodnôt v JavaScripte.
Ako získať a nastaviť hodnotu vstupného textu v JavaScripte?
Ak chcete získať a nastaviť hodnotu vstupného textu v jazyku JavaScript, použite:
- “ getElementById() “
- “ getElementByClassName() “
- “ querySelector() “
Prejdite si každú zo spomínaných metód jednu po druhej!
Metóda 1: Získanie a nastavenie vstupnej textovej hodnoty v JavaScripte pomocou metódy document.getElementById().
' getElementById() ” metóda pristupuje k prvku so zadaným ID. Túto metódu možno použiť na prístup k ID vstupných polí a tlačidiel na získanie a nastavenie textovej hodnoty.
Syntax
dokument. getElementById ( prvkov )
Tu, ' prvkov ” odkazuje na špecifikované ID prvku.
Nasledujúci príklad vysvetľuje diskutovanú koncepciu.
Príklad
Najprv zahrňte dve polia typu vstupu a samostatné tlačidlá na získanie a nastavenie hodnôt vstupného textu pomocou „ po kliknutí ” udalosti, ktoré budú pristupovať k špecifikovaným funkciám:
< tlačidlo onclick = 'getText()' > Získajte hodnotu tlačidlo >
< tlačidlo onclick = 'getAndSetText()' > Nastaviť hodnotu tlačidlo >
< typ vstupu = 'text' id = 'setText' názov = 'setText' po kliknutí = 'this.value = '' ' />
Potom získajte hodnotu vstupného poľa pomocou metódy document.getElementById():
dokument. getElementById ( 'getText' ) . hodnotu = 'Zadajte sem' ;Teraz deklarujte funkciu s názvom „ getAndSetText() “. Tu získajte vstupné pole s „ getText ” id a odošlite vstupnú hodnotu do ďalšieho vstupného poľa, ktoré má “ nastaviťText ”id:
funkciu getAndSetText ( ) {bol nastaviťText = dokument. getElementById ( 'getText' ) . hodnotu ;
dokument. getElementById ( 'setText' ) . hodnotu = nastaviťText ;
}
Podobne definujte funkciu s názvom „ getText() “. Potom získajte vstupné pole s „ getText ” id a odošlite konkrétnu hodnotu do výstražného poľa na získanie vstupnej textovej hodnoty:
funkciu getText ( ) {bol getText = dokument. getElementById ( 'getText' ) . hodnotu ;
upozorniť ( getText ) ;
}
Výkon
Metóda 2: Získanie a nastavenie vstupnej textovej hodnoty v JavaScripte pomocou metódy document.getElementByClassName()
' getElementByClassName() ” metóda pristupuje k prvku pomocou zadaného názvu triedy. Túto metódu možno podobne použiť na prístup k triede vstupného poľa a tlačidlám na zadávanie a nastavenie textovej hodnoty.
Syntax
dokument. getElementsByClassName ( meno triedy )Vo vyššie uvedenej syntaxi je „ meno triedy “ predstavuje názov triedy prvkov.
Príklad
Podobne ako v predchádzajúcom príklade najskôr pristúpime k prvému vstupnému poľu s „ getText “názov triedy. Potom definujte funkciu s názvom „ getAndSetText() “ a získajte zadané vstupné pole na základe názvu triedy a nastavte hodnotu v nasledujúcom vstupnom poli:
funkciu getAndSetText ( )
{
bol nastaviťText = dokument. getElementByClassName ( 'getText' ) . hodnotu ;
dokument. getElementById ( 'setText' ) . hodnotu = nastaviťText ;
}
Podobne definujte funkciu s názvom „ getText() “, pridajte názov triedy prvého vstupného poľa a odošlite konkrétnu hodnotu do výstražného poľa, aby sa zobrazila načítaná hodnota:
funkciu getText ( ) {bol getText = dokument. getElementByClassName ( 'getText' ) . hodnotu ;
upozorniť ( getText ) ;
}
Táto implementácia prinesie nasledujúci výstup:
Metóda 3: Získanie a nastavenie vstupnej textovej hodnoty v JavaScripte pomocou metódy „document.querySelector()“
' document.querySelector() ” načíta prvé e šiel dole ktorý sa zhoduje so zadaným selektorom a metóda addEventListener() môže do vybratého prvku pridať obsluhu udalosti. Tieto metódy je možné použiť na získanie ID vstupného poľa a tlačidiel a použiť na ne obsluhu udalosti.
Syntax
dokument. querySelector ( Selektor CSS )Tu, ' Selektor CSS ” odkazujú na jeden alebo viacero selektorov CSS.
Pozrite si nasledujúci príklad.
Príklad
Najprv zahrňte typy vstupu s ich zástupnými hodnotami a tlačidlami na získanie a nastavenie hodnôt vstupného textu:
< ID tlačidla = 'dostať' > GET tlačidlo >
< typ vstupu = 'text' id = 'vstupná sada' zástupný symbol = 'Nastaviť hodnotu' >
< ID tlačidla = 'set' > SET tlačidlo >
Potom načítajte pridané vstupné polia a tlačidlá pomocou „ document.querySelector() “ metóda:
nechajte tlačidloGet = dokument. querySelector ( '#get' ) ;nechajte tlačidlo Set = dokument. querySelector ( '#set' ) ;
nech getInput = dokument. querySelector ( '#input-get' ) ;
nech setInput = dokument. querySelector ( '#input-set' ) ;
nechať výsledok = dokument. querySelector ( '#vysledok' ) ;
Potom zahrňte obsluhu udalosti s názvom „ kliknite ” pre obe tlačidlá na získanie a nastavenie hodnôt, v tomto poradí:
tlačidloZískať. addEventListener ( 'klikni' , ( ) => {výsledok. vnútornýText = getInput. hodnotu ;
} ) ;
buttonSet. addEventListener ( 'klikni' , ( ) => {
getInput. hodnotu = setInput. hodnotu ;
} ) ;
Výkon
Diskutovali sme o najjednoduchších metódach na získanie a nastavenie vstupnej textovej hodnoty v JavaScripte.
Záver
Ak chcete získať a nastaviť vstupnú textovú hodnotu v JavaScripte, použite „ document.getElementById() “metóda alebo
“ document.getElementByClassName() ” metóda pre prístup k špecifikovanému vstupnému poľu a tlačidlám na základe ich ID alebo názvu triedy a potom nastavte ich hodnoty. Navyše, „ document.querySelector() ” možno použiť aj na získanie a nastavenie vstupných textových hodnôt v JavaScripte. Tento blog vysvetlil metódy na získanie a nastavenie vstupných textových hodnôt v JavaScripte.