Jak uzyskać wartość pola wprowadzania tekstu za pomocą JavaScript?

JavaScript może wchodzić w interakcje z różnymi stronami internetowymi, aby zapewnić serwer, a także usługi po stronie klienta. Cel JavaScript jest dostarczenie interaktywnych elementów na stronach internetowych, aby zaangażować użytkowników. Te interaktywne elementy obejmują dynamiczną stylistykę, wprowadzanie wartości, uzyskanie wartości z form itp.

W tym poście praktyczne wdrożenie sposobu uzyskania wartości tekstu z pól wejściowych jest wykonywane za pomocą JavaScript.

Istnieją różne sposoby pozyskiwania wartości z pola wejściowego poprzez wykorzystanie JavaScript. Uważając je, wyniki postu to:

• • Korzystanie z getElementByID w JavaScript
  • Korzystanie z GetElementsBlassName w JavaScript

Metoda 1: Za pomocą getElementByID w JavaScript

W JavaScript, GetElementById Metoda jest wykorzystywana, aby uzyskać wartość podkładu wejściowego z atrybutem identyfikatora. Ta metoda jest stosowana do zwrócenia danych wyjściowych według określonej wartości. Zwraca wartość zerową, jeśli element nie jest tutaj obecny. Większość użytkowników używa go do czytania i modyfikowania elementów HTML. Składnia getElementByID jest następująca:

Składnia

dokument.getElementById („InututId”).wartość;

W tej składni, GetElementById Metoda wyodrębnia wartość, przekazując ten sam atrybut ID „wejście".

Kod

Przykład uzyskania wartości pola tekstowego wejściowego.

naciśnij przycisk

W powyższym kodzie:

• • Po pierwsze, pole wejściowe służy do przyjmowania danych wejściowych od użytkownika.
  • Potem getInputValue () Funkcja służy do pozyskiwania właściwości wartości za pomocą GetElementById.wartość.
  • Tworzony jest nowy przycisk, który ma funkcję getInputValue () w swoim wydarzeniu OnClick.

Wyjście

Po wykonaniu kodu pojawi się pole tekstowe i przycisk. Kiedy piszesz słowo w polu tekstowym i naciśnięto przycisk, pojawi się pole alertów, które zawiera słowo/tekst napisany wcześniej w polu tekstowym. Wysknięcie o ostrzeżenie byłoby jak pokazane poniżej:

Metoda 2: Korzystanie z nazwy getElementsBlassName w JavaScript

W JavaScript inna metoda znana jako GetElementsByClassName służy do uzyskania wartości pola wprowadzania tekstu. Zwraca zestaw elementów określonych według nazwy klasy. getElementsByClassName () Metoda jest wywoływana przy użyciu elementu dokumentu. Wyszuwa cały dokument i podaje wyjście wszystkich elementów dziecięcych obecnych w dokumencie. Składnia do użycia tej metody znajduje się poniżej:

dokument.getElementsByClassName („inputClass”) [0].wartość;

Składnia jest opisana jako:

• • Inputclass: reprezentuje nazwę klasy.
  • [0]: Reprezentuje, że jeśli nie ma tu elementu pasującego, zwróć niezdefiniowane.

Kod

Za pomocą metody getElementByClassName i wyświetl ją.

Uzyskaj wartość

Powyższy kod to reprezentuje Inputclass jest określony jako nazwa klasy pola tekstowego. Potem getInputValue () stosuje się funkcję, w której getElementsByClassName () jest nazywane za pomocą dokument element, określając nazwę klasy „Inputclass".

Wyjście

Na powyższym wyświetlaczu wartość „Minhal”Jest umieszczany wewnątrz złożonego tekstu.

Po naciśnięciu Uzyskaj wartość przycisk, wartość jest przechowywana i wyświetlana jako komunikat alarmowy w wyskakującym oknie. W ten sposób getElementsByClassName () Metodę można zastosować do uzyskania wartości pola wprowadzania tekstu za pomocą JavaScript.

Wniosek

W JavaScript, getElementById () I getElementsByClassName () Metody są wykorzystywane do uzyskania wartości pola wprowadzania tekstu. w getElementById () Metoda, wartość pola tekstowego wejściowego jest wyodrębniana za pomocą atrybutu identyfikatora. Natomiast getElementsByClassName () Metoda zwraca zestaw elementów określonych według nazwy klasy. Obie te metody są obsługiwane przez zaawansowane przeglądarki, w tym Chrome, Opera, Safari itp. Nauczyłeś się wyodrębniać wartość pola wejściowego tekstu JavaScript.