Ten artykuł zademonstruje metody pobierania i ustawiania wejściowych wartości tekstowych w JavaScript.
Jak uzyskać i ustawić wartość tekstu wejściowego w JavaScript?
Aby pobrać i ustawić wartość tekstu wejściowego w JavaScript, użyj:
- “ pobierzElementById() ' metoda
- “ pobierzElementWedługNazwyKlasy() ' metoda
- “ zapytanieSelector() ' metoda
Przejdź przez każdą z wymienionych metod jeden po drugim!
Metoda 1: Pobierz i ustaw wartość tekstu wejściowego w JavaScript za pomocą metody document.getElementById()
„ pobierzElementById() ” uzyskuje dostęp do elementu o określonym identyfikatorze. Tę metodę można zastosować, aby uzyskać dostęp do identyfikatorów pól wejściowych i przycisków do pobierania i ustawiania wartości tekstowej.
Składnia
dokument. getElementById ( elementy )
Tutaj, ' elementy ” odnosi się do określonego identyfikatora elementu.
Poniższy przykład wyjaśnia omawianą koncepcję.
Przykład
Po pierwsze, dołącz dwa pola typu danych wejściowych i oddzielne przyciski do pobierania i ustawiania wartości tekstu wejściowego za pomocą „ na kliknięcie ” zdarzenia, które będą miały dostęp do określonych funkcji:
< przycisk po kliknięciu = 'pobierz tekst()' > Uzyskaj wartość przycisk >
< przycisk po kliknięciu = 'pobierzIUstawTekst()' > Ustalić wartość przycisk >
< typ wejścia = 'tekst' ID = 'Ustaw tekst' Nazwa = 'Ustaw tekst' na kliknięcie = 'ta.wartość = '' ' />
Następnie pobierz wartość pola wejściowego za pomocą metody document.getElementById():
dokument. getElementById ( „pobierz tekst” ) . wartość = „Wprowadź tutaj” ;Teraz zadeklaruj funkcję o nazwie „ pobierzAndSetText() ”. Tutaj pobierz pole wejściowe za pomocą „ pobierz tekst ” id i przekaż wartość wejściową do następnego pola wejściowego posiadającego „ Ustaw tekst ' ID:
funkcjonować getAndSetText ( ) {był Ustaw tekst = dokument. getElementById ( „pobierz tekst” ) . wartość ;
dokument. getElementById ( 'Ustaw tekst' ) . wartość = Ustaw tekst ;
}
Podobnie, zdefiniuj funkcję o nazwie „ pobierzTekst() ”. Następnie uzyskaj pole wejściowe z „ pobierz tekst ” id i przekaż konkretną wartość do pola alertu w celu uzyskania wejściowej wartości tekstu:
funkcjonować pobierz tekst ( ) {był pobierz tekst = dokument. getElementById ( „pobierz tekst” ) . wartość ;
alarm ( pobierz tekst ) ;
}
Wyjście
Metoda 2: Pobierz i ustaw wartość tekstu wejściowego w JavaScript za pomocą metody document.getElementByClassName()
„ pobierzElementWedługNazwyKlasy() Metoda ” uzyskuje dostęp do elementu za pomocą określonej nazwy klasy. Podobnie tę metodę można zastosować, aby uzyskać dostęp do klasy pola wejściowego i przycisków do wprowadzania i ustawiania wartości tekstowej.
Składnia
dokument. getElementsByClassName ( Nazwa klasy )W powyższej składni „ Nazwa klasy ” reprezentuje nazwę klasy elementów.
Przykład
Podobnie jak w poprzednim przykładzie, najpierw uzyskamy dostęp do pierwszego pola wejściowego za pomocą „ pobierz tekst ' Nazwa klasy. Następnie zdefiniuj funkcję o nazwie „ pobierzAndSetText() ” i pobierz określone pole wejściowe na podstawie nazwy jego klasy i ustaw wartość w następnym polu wejściowym:
funkcjonować getAndSetText ( )
{
był Ustaw tekst = dokument. getElementByClassName ( „pobierz tekst” ) . wartość ;
dokument. getElementById ( 'Ustaw tekst' ) . wartość = Ustaw tekst ;
}
Podobnie, zdefiniuj funkcję o nazwie „ pobierzTekst() ”, dodaj nazwę klasy pierwszego pola wejściowego i przekaż konkretną wartość do okna alertu, aby wyświetlić pobraną wartość:
funkcjonować pobierz tekst ( ) {był pobierz tekst = dokument. getElementByClassName ( „pobierz tekst” ) . wartość ;
alarm ( pobierz tekst ) ;
}
Ta implementacja przyniesie następujące wyniki:
Metoda 3: Pobierz i ustaw wartość tekstu wejściowego w JavaScript za pomocą metody „document.querySelector()”
„ document.querySelector() ” pobiera pierwszy e zszedł który pasuje do określonego selektora, a metoda addEventListener() może dodać procedurę obsługi zdarzeń do wybranego elementu. Te metody można zastosować, aby uzyskać identyfikator pola wejściowego i przycisków oraz zastosować do nich procedurę obsługi zdarzeń.
Składnia
dokument. selektor zapytań ( Selektory CSS )Tutaj, ' Selektory CSS ” odnoszą się do co najmniej jednego selektora CSS.
Spójrz na następujący przykład.
Przykład
Po pierwsze, uwzględnij typy wejściowe z ich wartościami zastępczymi i przyciskami do pobierania i ustawiania wejściowych wartości tekstowych:
< identyfikator przycisku = 'Dostawać' > DOSTAWAĆ przycisk >
< typ wejścia = 'tekst' ID = 'zestaw wejściowy' symbol zastępczy = 'Ustalić wartość' >
< identyfikator przycisku = 'ustawić' > USTAWIĆ przycisk >
Następnie pobierz dodane pola wejściowe i przyciski za pomocą „ document.querySelector() ' metoda:
niech przyciskGet = dokument. selektor zapytań ( '#Dostawać' ) ;niech buttonSet = dokument. selektor zapytań ( '#ustawić' ) ;
niech getInput = dokument. selektor zapytań ( „#wejście-pobierz” ) ;
niech ustaw wejście = dokument. selektor zapytań ( „#zestaw-wejść” ) ;
niech wynik = dokument. selektor zapytań ( '#wynik' ) ;
Następnie dołącz procedurę obsługi zdarzeń o nazwie „ Kliknij ” dla obu przycisków, aby uzyskać i ustawić wartości, odpowiednio:
przycisk Pobierz. addEventListener ( 'Kliknij' , ( ) => {wynik. tekst wewnętrzny = getInput. wartość ;
} ) ;
buttonSet. addEventListener ( 'Kliknij' , ( ) => {
getInput. wartość = setInput. wartość ;
} ) ;
Wyjście
Omówiliśmy najprostsze metody pobierania i ustawiania wartości tekstu wejściowego w JavaScript.
Wniosek
Aby pobrać i ustawić wartość tekstu wejściowego w JavaScript, użyj „ document.getElementById() ” metoda lub
“ document.getElementByClassName() ” metoda dostępu do określonego pola wejściowego i przycisków na podstawie ich identyfikatorów lub nazwy klasy, a następnie ustawienia ich wartości. Ponadto „ document.querySelector() ” można również wykorzystać do pobierania i ustawiania wejściowych wartości tekstowych w JavaScript. W tym blogu wyjaśniono metody pobierania i ustawiania wartości tekstu wejściowego w JavaScript.