JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでテキストボックスの入力値を取得して表示する方法

JavaScriptでは、valueプロパティを使ってテキストボックスに入力された値を取得し、innerHTMLを使うことでその値を段落（<p>要素）に表示することができます。この仕組みは、フォームの入力内容をリアルタイムに画面へ反映させたい場合などによく使われる基本的なテクニックです。

コード例

以下が実際のサンプルコードです。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
   Enter your Name:
   <input type="text" placeholder="enter your name" id="txtInputData">
   <button onclick="displayName()">Click Me</button>
   <p id="show_name">
   </p>
</body>
<script>
   function displayName() {
      var originalName = document.getElementById("txtInputData").value;
      document.getElementById("show_name").innerHTML = "Your Name is :" + originalName;
   }
</script>
</html>

コードのポイント

このプログラムでは、以下の流れで処理が行われています。

1. 入力欄とボタンの配置： id="txtInputData" を持つテキストボックスと、クリックされると関数 displayName() を呼び出すボタンを用意します。
2. 値の取得： document.getElementById("txtInputData").value によって、テキストボックスに入力された文字列を変数に格納します。
3. 結果の表示： document.getElementById("show_name").innerHTML に取得した値を連結した文字列を代入することで、段落内に名前が表示されます。

プログラムの実行方法

上記のプログラムを実行するには、まずファイル名を「anyName.html（index.html）」として保存してください。その後、VSCodeエディタでファイルを右クリックし、「Open with Live Server」オプションを選択するとブラウザで開くことができます。

実行結果

ブラウザでページを開くと、最初に次のような画面が表示されます。

JavaScriptでテキストボックスの入力値を取得して表示する方法

続いて、テキストボックスに名前などの値を入力し、「Click Me」ボタンをクリックしてみてください。

JavaScriptでテキストボックスの入力値を取得して表示する方法

ボタンをクリックすると、テキストボックスに入力した内容が段落の中に次のように表示されます。

JavaScriptでテキストボックスの入力値を取得して表示する方法


  1. JavaScriptオブジェクトの内容を文字列として表示する方法

    JavaScriptでオブジェクトの内容を文字列形式で画面に表示したい場合、document.getElementById()でHTML要素を取得し、innerHTMLを使って書き出すのが基本的な方法です。オブジェクトを文字列に変換するには、JSON.stringify()メソッドを活用します。 実装手順 まず、表示先となるHTML要素にIDを設定します。次に、JavaScript側でそのIDを指定して要素を取得し、変換した文字列をinnerHTMLに代入します。 コード例 <!DOCTYPE html> <html lang="ja"> <h

  2. 【初心者向け】HTMLフォームの値をJavaScriptで取得してコンソールに表示する方法

    HTMLフォームに入力された値を取得するには、valueプロパティを使用します。本記事では、テキストボックスに設定された値をJavaScriptで読み取り、ブラウザのコンソールに出力する方法を、実際のコード例とともに解説します。取得対象となるHTMLフォームの例まず、以下のようなテキスト入力フィールドがあるとします。<input type="text" id="getValues" value="My Name is John Smith" />このinput要素には、id属性として「getValues」が設定され、初期値