Tento zápis demonstruje metody pro získání a nastavení vstupních textových hodnot v JavaScriptu.
Jak získat a nastavit hodnotu vstupního textu v JavaScriptu?
Chcete-li získat a nastavit hodnotu vstupního textu v JavaScriptu, použijte:
- “ getElementById() “ metoda
- “ getElementByClassName() “ metoda
- “ querySelector() “ metoda
Projděte si každou ze zmíněných metod jednu po druhé!
Metoda 1: Získání a nastavení vstupní textové hodnoty v JavaScriptu pomocí metody document.getElementById().
' getElementById() ” metoda přistupuje k prvku se zadaným ID. Tuto metodu lze použít pro přístup k ID vstupních polí a tlačítek pro získání a nastavení textové hodnoty.
Syntax
dokument. getElementById ( Prvky )
Tady, ' Prvky ” odkazuje na zadané ID prvku.
Níže uvedený příklad vysvětluje diskutovanou koncepci.
Příklad
Nejprve zahrňte dvě pole typu vstupu a samostatná tlačítka pro získání a nastavení hodnot vstupního textu pomocí „ při kliknutí ” události, které budou přistupovat ke specifikovaným funkcím:
< tlačítko onclick = 'getText()' > Získejte hodnotu knoflík >
< tlačítko onclick = 'getAndSetText()' > Nastavit hodnotu knoflík >
< Typ vstupu = 'text' id = 'setText' název = 'setText' při kliknutí = 'this.value = '' ' />
Poté pomocí metody document.getElementById() získejte hodnotu vstupního pole:
dokument. getElementById ( 'getText' ) . hodnota = 'Zadejte zde' ;Nyní deklarujte funkci s názvem „ getAndSetText() “. Zde načtěte vstupní pole pomocí „ getText ” id a předá vstupní hodnotu do dalšího vstupního pole, které má “ setText ”id:
funkce getAndSetText ( ) {byl setText = dokument. getElementById ( 'getText' ) . hodnota ;
dokument. getElementById ( 'setText' ) . hodnota = setText ;
}
Podobně definujte funkci s názvem „ getText() “. Poté získejte vstupní pole s „ getText ” id a předejte konkrétní hodnotu do výstražného pole pro získání vstupní textové hodnoty:
funkce getText ( ) {byl getText = dokument. getElementById ( 'getText' ) . hodnota ;
upozornění ( getText ) ;
}
Výstup
Metoda 2: Získání a nastavení vstupní textové hodnoty v JavaScriptu pomocí metody document.getElementByClassName()
' getElementByClassName() Metoda ” přistupuje k prvku pomocí zadaného názvu třídy. Tuto metodu lze obdobně použít pro přístup ke třídě vstupního pole a tlačítkům pro zadávání a nastavení textové hodnoty.
Syntax
dokument. getElementsByClassName ( jméno třídy )Ve výše uvedené syntaxi je „ jméno třídy ” představuje název třídy prvků.
Příklad
Podobně jako v předchozím příkladu nejprve vstoupíme do prvního vstupního pole s „ getText ' jméno třídy. Poté definujte funkci s názvem „ getAndSetText() ” a získejte zadané vstupní pole na základě jeho názvu třídy a nastavte hodnotu v dalším vstupním poli:
funkce getAndSetText ( )
{
byl setText = dokument. getElementByClassName ( 'getText' ) . hodnota ;
dokument. getElementById ( 'setText' ) . hodnota = setText ;
}
Podobně definujte funkci s názvem „ getText() “, přidejte název třídy prvního vstupního pole a předejte konkrétní hodnotu do pole výstrahy, aby se zobrazila načtená hodnota:
funkce getText ( ) {byl getText = dokument. getElementByClassName ( 'getText' ) . hodnota ;
upozornění ( getText ) ;
}
Tato implementace poskytne následující výstup:
Metoda 3: Získání a nastavení vstupní textové hodnoty v JavaScriptu pomocí metody „document.querySelector()“
' document.querySelector() “vyzvedává první e šel dolů který odpovídá zadanému selektoru, a metoda addEventListener() může k vybranému prvku přidat obsluhu události. Tyto metody lze použít k získání id vstupního pole a tlačítek a aplikovat na ně obsluhu události.
Syntax
dokument. querySelector ( CSS selektory )Tady, ' CSS selektory ” odkazují na jeden nebo více selektorů CSS.
Podívejte se na následující příklad.
Příklad
Nejprve zahrňte typy vstupu s jejich zástupnými hodnotami a tlačítky pro získání a nastavení hodnot vstupního textu:
< ID tlačítka = 'dostat' > DOSTAT knoflík >
< Typ vstupu = 'text' id = 'vstupní sada' zástupný symbol = 'Nastavit hodnotu' >
< ID tlačítka = 'soubor' > SOUBOR knoflík >
Dále načtěte přidaná vstupní pole a tlačítka pomocí „ document.querySelector() “ metoda:
nechat tlačítkoGet = dokument. querySelector ( '#dostat' ) ;nechte tlačítko nastavit = dokument. querySelector ( '#soubor' ) ;
nechat getInput = dokument. querySelector ( '#input-get' ) ;
nechejte setInput = dokument. querySelector ( '#input-set' ) ;
nechat výsledek = dokument. querySelector ( '#výsledek' ) ;
Poté zahrňte obsluhu události s názvem „ klikněte ” pro obě tlačítka pro získání a nastavení hodnot:
tlačítko Získat. addEventListener ( 'kliknout' , ( ) => {výsledek. vnitřníText = getInput. hodnota ;
} ) ;
buttonSet. addEventListener ( 'kliknout' , ( ) => {
getInput. hodnota = setInput. hodnota ;
} ) ;
Výstup
Probrali jsme nejjednodušší metody pro získání a nastavení vstupní textové hodnoty v JavaScriptu.
Závěr
Chcete-li získat a nastavit hodnotu vstupního textu v JavaScriptu, použijte „ document.getElementById() “ metoda nebo
“ document.getElementByClassName() ” metoda pro přístup k zadanému vstupnímu poli a tlačítkům na základě jejich ID nebo názvu třídy a poté nastavte jejich hodnoty. Navíc, „ document.querySelector() ” lze také použít pro získání a nastavení vstupních textových hodnot v JavaScriptu. Tento blog vysvětlil metody získání a nastavení vstupních textových hodnot v JavaScriptu.