この記事では、JavaScript で入力テキスト値を取得および設定する方法を示します。
JavaScript で入力テキスト値を取得および設定する方法は?
JavaScript で入力テキスト値を取得および設定するには、以下を利用します。
- 「 getElementById() ' 方法
- 「 getElementByClassName() ' 方法
- 「 querySelector() ' 方法
上記の方法を 1 つずつ実行してください。
方法 1: JavaScript で document.getElementById() メソッドを使用して入力テキスト値を取得および設定する
「 getElementById() 」メソッドは、指定された Id を持つ要素にアクセスします。このメソッドを適用して、テキスト値を取得および設定するための入力フィールドとボタンの ID にアクセスできます。
構文
資料。 getElementById ( 要素 )
ここ、 ' 要素 」は、要素の指定された Id を参照します。
以下の例は、議論されている概念を説明しています。
例
まず、2 つの入力タイプ フィールドと、「 オンクリック 指定された機能にアクセスするイベント:
< ボタンオンクリック = 'getText()' > 価値を得る ボタン >
< ボタンオンクリック = 'getAndSetText()' > 設定値 ボタン >
< 入力方式 = '文章' ID = 「セットテキスト」 名前 = 「セットテキスト」 オンクリック = 'この値 = ''' />
次に、document.getElementById() メソッドを使用して入力フィールドの値を取得します。
資料。 getElementById ( 'getText' ) . 価値 = 「ここに入力」 ;次に、「」という名前の関数を宣言します getAndSetText() 」。ここでは、「 getText 」 id を入力し、入力値を次の入力フィールドに渡します。 セットテキスト 」 ID:
関数 getAndSetText ( ) {だった セットテキスト = 資料。 getElementById ( 'getText' ) . 価値 ;
資料。 getElementById ( 'setText' ) . 価値 = セットテキスト ;
}
同様に、「」という名前の関数を定義します。 getText() 」。その後、「」で入力フィールドを取得します getText 」 id を入力し、特定の値をアラート ボックスに渡して、入力テキスト値を取得します。
関数 getText ( ) {だった getText = 資料。 getElementById ( 'getText' ) . 価値 ;
アラート ( getText ) ;
}
出力
方法 2: JavaScript で document.getElementByClassName() メソッドを使用して入力テキスト値を取得および設定する
「 getElementByClassName() 」メソッドは、指定されたクラス名を使用して要素にアクセスします。同様に、このメソッドを適用して、テキスト値を入力および設定するための入力フィールドとボタンのクラスにアクセスできます。
構文
資料。 getElementsByClassName ( クラス名 )上記の構文では、「 クラス名 」は要素のクラス名を表します。
例
前の例と同様に、最初の入力フィールドに「 getText ' クラス名。次に、「」という名前の関数を定義します getAndSetText() クラス名に基づいて指定された入力フィールドを取得し、次の入力フィールドに値を設定します。
関数 getAndSetText ( )
{
だった セットテキスト = 資料。 getElementByClassName ( 'getText' ) . 価値 ;
資料。 getElementById ( 'setText' ) . 価値 = セットテキスト ;
}
同様に、「」という名前の関数を定義します。 getText() 」、最初の入力フィールドのクラス名を追加し、特定の値をアラート ボックスに渡して、取得した値を表示します。
関数 getText ( ) {だった getText = 資料。 getElementByClassName ( 'getText' ) . 価値 ;
アラート ( getText ) ;
}
この実装により、次の出力が生成されます。
方法 3: 「document.querySelector()」メソッドを使用して Javascript で入力テキスト値を取得および設定する
「 document.querySelector() 」は最初の e を取得します 降りた これは指定されたセレクターに一致し、addEventListener() メソッドは、選択された要素にイベント ハンドラーを追加できます。これらのメソッドを適用して、入力フィールドとボタンの ID を取得し、それらにイベント ハンドラーを適用できます。
構文
資料。 クエリセレクター ( CSS セレクター )ここ、 ' CSS セレクター 」 は、1 つ以上の CSS セレクターを参照します。
次の例を見てください。
例
まず、入力テキスト値を取得および設定するためのプレースホルダー値とボタンを含む入力タイプを含めます。
< ボタン ID = '得る' > 得る ボタン >
< 入力方式 = '文章' ID = 「入力セット」 プレースホルダー = 「設定値」 >
< ボタン ID = '設定' > 設定 ボタン >
次に、「 document.querySelector() ' 方法：
let buttonGet = 資料。 クエリセレクター ( '＃得る' ) ;ボタンセットをさせてください = 資料。 クエリセレクター ( '＃設定' ) ;
getInput を許可する = 資料。 クエリセレクター ( '#input-get' ) ;
入力を設定させます = 資料。 クエリセレクター ( '#入力セット' ) ;
結果を出す = 資料。 クエリセレクター ( '＃結果' ) ;
次に、「」という名前のイベント ハンドラーを含めます。 クリック 両方のボタンで、それぞれ値を取得および設定します。
ボタンを取得します。 addEventListener ( 'クリック' 、 ( ) => {結果。 内部テキスト = 入力を取得します。 価値 ;
} ) ;
ボタンセット。 addEventListener ( 'クリック' 、 ( ) => {
入力を取得します。 価値 = 入力を設定します。 価値 ;
} ) ;
出力
JavaScript で入力テキスト値を取得および設定する最も簡単な方法について説明しました。
結論
JavaScript で入力テキスト値を取得および設定するには、「 document.getElementById() 」メソッドまたは
「 document.getElementByClassName() IDまたはクラス名に基づいて指定された入力フィールドとボタンにアクセスし、それらの値を設定するためのメソッド。さらに、「 document.querySelector() 」は、JavaScript で入力テキスト値を取得および設定するためにも利用できます。このブログでは、JavaScript で入力テキスト値を取得および設定する方法について説明しました。