JavaScriptで入力フィールドの値を設定するにはどうすればよいですか？

JavaScriptを使用したDOM操作により、プログラマーはHTMLWebページの要素または要素の属性を変更することができます。 入力フィールドの値を変更することも同じです。 JavaScriptを使用して入力フィールドの値を変更するには、2つの方法があります。 これらは：

• 代入演算子「」を使用して、要素のvalue属性に値を割り当てます。=」
• を使用して SetAttribute（） 関数。

これら両方のメソッドのデモンストレーションに飛び込んでみましょう。ただし、その前に、使用するHTMLテンプレートが必要です。

HTMLWebページの設定

HTMLファイルに次の行を追加するだけで、IDが「textFeild1」の新しいテキスト入力フィールドが作成されます。

プログラムを実行すると、ブラウザで次の出力が表示されます。

画面に入力フィールドが表示されます。

方法1：値属性に値を直接割り当てる

このために、最初にHTMLファイルに次の行を追加します。

これにより、テキストフィールドの下に新しいボタンが追加されます。 そして、このボタンをクリックすると、次の名前の関数が添付されます。 changeValue（）：

スクリプトファイルに、このボタンを機能させるために次の機能を追加します。

まず、document.getElementbyId（）を使用してテキストフィールドへの参照を取得します。 その後、ドット演算子を使用してvalue属性を取得し、それに文字列値を直接割り当てます。 このボタンをクリックすると、次の出力が得られます。

ご覧のとおり、ドット演算子とvalue属性を使用して、入力フィールドの値を変更することができました。

方法2：setAttribute（）関数を使用する

このために、HTMLファイルの次の行を使用して、前のボタンのすぐ下に新しいボタンを追加します。

ご覧のとおり、このボタンには次の名前の関数が付属しています。 setAttributeChange（）。 このHTMLをロードすると、ブラウザに次のWebページが表示されます。

次に、スクリプトファイル内に移動し、これを定義します setAttributeChange（） 次のように機能を変更します。

最初の行では、を使用してテキストフィールドへの参照を取得しています document.getElementById（） 関数。 その後、使用しています ドット演算子 そしてその setAttribute（） 属性を選択する関数「価値」と入力し、文字列値を「方法2」。 ボタンをクリックすると、次の出力が得られます。

ご覧のとおり、setAttribute（）関数を使用して入力フィールドの値を変更することができました。

結論

Javascriptを使用すると、DOM操作を使用して、HTMLWebページ内の入力フィールドのvalue属性を簡単に変更できます。 このために、同じ結果につながる2つの異なるアプローチがあります。 element.setAttribute（）関数を使用すると、属性を選択して、選択した値を指定できます。 次に、「ドット演算子」次に、代入演算子「」を使用して、その属性に任意の値を割り当てます。=。」