Jak ustawić wartość pola wejściowego w JavaScript?

Dom Manipulations za pomocą JavaScript pozwala programistowi zmienić elementy lub nawet atrybuty elementów strony internetowej HTML. Zmiana wartości pola wejściowego nie jest inaczej. Istnieją dwa podejścia do zmiany wartości pola wejściowego za pomocą JavaScript. To są:

• Przypisanie atrybutu wartości elementu pewna wartość za pomocą operatora przypisania „="
• Za pomocą SetAttribute () funkcjonować.

Po prostu wskoczmy do demonstracji obu tych metod, ale wcześniej potrzebujemy szablonu HTML do pracy.

Konfigurowanie strony internetowej HTML

W pliku HTML po prostu dodaj następujące wiersze, aby utworzyć nowe pole wejściowe tekstu z identyfikatorem „Textfeild1”

Podczas realizacji programu przechodzimy do następującego wyjścia w naszej przeglądarce:

Możemy zobaczyć nasze pole wejściowe na ekranie.

Metoda 1: Przypisz bezpośredni atrybut wartości pewnej wartości

W tym celu najpierw dodamy następujące wiersze w naszym pliku HTML:

Zmiana waluty

To doda nowy przycisk pod naszym polem tekstowym. I dołączyliśmy funkcję po kliknięciu tego przycisku wymienionego jako zmiana waluty():

W pliku skryptu dodamy następującą funkcję, aby ten przycisk zadziałał:

funkcja zmianaValue ()
Textfield = Dokument.getElementById („Textfield1”);
pole tekstowe.wartość = "metoda 1";

Najpierw otrzymujemy odniesienie do naszego pola tekstowego za pomocą dokumentu.getElementById (). Następnie używamy operatora DOT, aby uzyskać atrybut wartości i bezpośrednio przypisać go wartość ciągu. Po kliknięciu tego przycisku otrzymujemy następujące dane wyjściowe:

Jak widać, byliśmy w stanie zmienić wartość pola wejściowego za pomocą operatora kropki i atrybutu wartości.

Metoda 2: Za pomocą funkcji setAttribute ()

W tym celu dodamy nowy przycisk bezpośredni pod poprzednim przyciskiem za pomocą następujących wierszy w pliku HTML:

Zmień według setAttribute ()

Jak widać, dołączyliśmy ten przycisk z funkcją o nazwie setAttributechange (). Po załadowaniu tego HTML otrzymujemy następującą stronę internetową w naszej przeglądarce:

Następnie wchodzimy do pliku skryptu i definiujemy to setAttributechange () Zmień funkcję w następujący sposób:

funkcja setattributechange ()
Textfield = Dokument.getElementById („Textfield1”);
pole tekstowe.setAttribute („wartość”, „metoda 2”);

W pierwszym wierszu otrzymujemy odniesienie do pola tekstowego za pomocą dokument.getElementById () funkcjonować. Następnie używamy Operator kropki i setAttribute () funkcja do wyboru atrybutu „wartość”, A następnie nadaj mu wartość ciągu jako„Metoda 2". Po kliknięciu przycisku otrzymujemy następujące dane wyjściowe:

Jak widać, byliśmy w stanie zmienić wartość pola wejściowego za pomocą funkcji setAttribute ().

Wniosek

Za pomocą manipulacji DOM JavaScript pozwala nam łatwo zmienić atrybut wartości pola wejściowego na stronie internetowej HTML. W tym celu mamy dwa różne podejścia, które prowadzą nas do tego samego wyniku. Mamy element.funkcja setAttribute (), która pozwala nam wybrać atrybut i nadać mu wartość naszego wyboru. Po drugie, mamy opcję wyboru atrybutu za pomocą „Operator DOT”, A następnie przypisz tę atrybut dowolną wartość za pomocą operatora przypisania„=."