Jak uzyskać wartość wejściową w JavaScript

JavaScript oferuje różnorodne funkcje w tworzeniu interaktywnych interfejsów. Można pobrać wartość dowolnego elementu za pomocą metod JavaScript. Wartość wejściową można wydrukować gdzieś na stronie internetowej lub można ją uzyskać jako komunikat ostrzegawczy. Wszystko to jest możliwe za pomocą JavaScript. Tutaj opiszemy JavaScript obsługa, aby uzyskać wartość wejściową z dowolnego elementu. Oczekuje się następujących wyników uczenia się:

• Jak uzyskać wartość wejściową w JavaScript
• Uzyskaj wartość wejściową za pomocą metody getElementById ()
• Uzyskaj wartość wejściową za pomocą metody getElementSBlassName ()
• Uzyskaj wartość wejściową za pomocą metody QuerySelelect ()

Jak uzyskać wartość wejściową w JavaScript

JavaScript zapewnia dwie właściwości, aby uzyskać wartości wejściowe poprzez zastosowanie GetElementById, GetElementsByClassName, I querySelelector metody. Metody te wyodrębniają ciąg, a także wartość numeryczną do wyświetlania informacji o użytkowniku. Wszystkie słynne przeglądarki wspierają obie te właściwości. wartość właściwość zwraca informacje użytkownika. Ponadto właściwość jest przydatna do przypisywania dowolnej konkretnej wartości wyświetlania w oknie przeglądarki.

Składnia tych metod podano poniżej.

Składnia GetElementById

dokument.getElementById („TextId”).wartość = "text_message";

Składnia GetElementsByClassName

dokument.getElementsByClassName („Clname”).wartość ;

Składnia QuerySelelector

dokument.querySelelector („ID1”).wartość

Opis powyższych parametrów jest jak poniżej:

• TextID: oznacza identyfikator elementu.
• wiadomość tekstowa: reprezentuje wiadomość do wyświetlenia.
• Clname: Podaj nazwę klasy.
• ID1: reprezentuje identyfikator lub klasę elementu HTML.

Przykład 1: Uzyskaj wartość wejściową za pomocą metody getElementById ()

Uwzględniono kolejny przykład uzyskania wartości wejściowej w JavaScript.

Html

Przykład, aby uzyskać wartość pola tekstowego

Ulubiona wiadomość:

Naciśnij przycisk, aby wyświetlić wartość tekstową.

Przycisk wyświetlania

Kod HTML otrzymuje wartość wejściową „Witamy w JavaScript„Naciskając„Przycisk wyświetlania". Przycisk jest przymocowany do Display_fn () metoda.

JavaScript

funkcja display_fn ()
var a = dokument.getElementById („mtxt”).wartość;
dokument.getElementById („demo”).innerHtml = a;

Metoda Display_fn () jest stosowany do pobrania wartości tekstu w pliku HTML według GetElementById.

Przykład 2: Uzyskaj wartość wejściową za pomocą metody getElementsBlassName ()

Uważa się, że przykład otrzymuje wartość liczbową z pola wejściowego w JavaScript.

Plik HTML

Przykład, aby uzyskać wartość liczbową pola

Uzyskaj wartość liczbową

W tym kodzie opis jest jak poniżej:

• Klasa INPCL służy do wprowadzania liczby numerycznej.
• Następnie przymocowany jest przycisk, który jest powiązany z getInpval () metoda.
• W końcu plik JavaScript test.JS jest połączony przez przypisanie źródła src zmienny.

JavaScript

funkcja getInpval ()
Let inPval = Dokument.getElementsByClassName („inpcls”) [0].wartość;
alert (inpval);

W pliku JavaScript:

• Metoda getInpval () służy do wyodrębnienia wartości z Html plik.
• Ekstrakcja jest wykonywana przez GetelementByClassName („inpcls”) [0].wartość.
• Ostatecznie komunikat alarmowy jest generowany przez przekazywanie inpval zmienny.

Wyjście

Wyjście pokazuje, że użytkownik najpierw wprowadza dowolną liczbę. Następnie generowany jest pole alertów, naciskając „Uzyskaj wartość liczbową" przycisk.

Przykład 3: Uzyskaj wartość wejściową za pomocą metody QuerySelelect ()

Uważa się inny przykład, aby uzyskać wartość za pomocą QuerySelelect () metoda.

Kod

Uzyskaj wartość za pomocą selektora zapytania

Przycisk wyświetlania

W tym kodzie opis jest następujący:

• Po pierwsze, pole tekstowe i a przycisk są dołączone I odpowiednio tagi.
• przycisk jest związany z getValueInput () metoda.
• W tej metodzie, QuerySelelect () jest stosowany do wyodrębnienia wartości pole tekstowe i wyświetl go za pomocą Val1.

Wyjście

Wyjście pokazuje komunikat „JavaScript”Naciskając przycisk w przeglądarce.

Wniosek

GetElementById, GetElementsByClassName, I QuerySelelect () Metody są wykorzystywane do uzyskania wartości wejściowej w JavaScript. Pierwsze dwie metody odzyskują elementy za pomocą nazwy ID i klasy. Podczas gdy trzecia metoda może uzyskać elementy za pomocą identyfikatora, a także nazwy klasy. Tutaj nauczyłeś się używać wszystkich trzech tych metod, aby uzyskać wartości wejściowe w JavaScript.