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

JavaScriptでテキストボックスに値を出力する方法をわかりやすく解説

JavaScriptでテキストボックスに値を出力したい場合は、input要素が持つvalueプロパティを利用します。ユーザーが入力した値を取得し、処理結果を別のテキストボックスのvalueに代入することで、画面への出力が可能になります。

ここでは、2つの数値を入力してその合計を表示するシンプルなサンプルを紹介します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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>
</head>
<body>
<label for="">1つ目の数値： </label><input type="textbox" name="input1"><br>
<label for="">2つ目の数値： </label><input type="textbox" name="input2"><br>
<button onClick="add()">2つの数値を足す</button><br>
<label for="displayValue">合計： </label><input type="textbox" name="display">
<script>
   function add() {
      var f = parseInt(document.getElementsByName('input1')[0].value);
      var s = parseInt(document.getElementsByName('input2')[0].value);
      var result = f + s;
      document.getElementsByName('display')[0].value = result;
   }
</script>
</body>
</html>

コードのポイント

  • 値の取得： document.getElementsByName('input1')[0].value のように、name属性を指定して入力欄の値を取得します。getElementsByNameは複数要素を返すため、[0]で最初の要素を参照しています。
  • 数値への変換： parseInt() を使って、文字列として取得された入力値を整数に変換しています。これを行わないと「+」演算子が文字列の連結として動作してしまうため注意が必要です。
  • 結果の出力： document.getElementsByName('display')[0].value = result; のようにvalueプロパティへ代入することで、計算結果をテキストボックスに表示できます。

プログラムの実行方法

上記のコードを anyName.html（または index.html） という名前で保存してください。VS Codeを使用している場合は、ファイルを右クリックして「Open with Live Server」を選択すると、ブラウザ上で簡単に動作を確認できます。

実行結果

JavaScriptでテキストボックスに値を出力する方法をわかりやすく解説

ボタンをクリックすると、入力された2つの数値の合計がテキストボックスに表示されます。実行後の画面は次のとおりです。

JavaScriptでテキストボックスに値を出力する方法をわかりやすく解説

  1. JavaScriptでボタンをクリックしたらテキストフィールドを空にする方法

    Web開発では、ボタンをクリックしたタイミングでテキストフィールド（テキストボックス）の中身を空にしたいケースがよくあります。たとえば、検索条件のリセットやフォーム入力内容の初期化などが代表例です。この記事では、JavaScriptを使ってこの処理をシンプルに実現する方法を解説します。 基本の考え方 実装に必要なのは、次の2つのステップだけです。 HTML側でonclick属性を使い、ボタンクリック時に呼び出すJavaScriptの関数を指定する 関数内でdocument.getElementById()によって対象の要素を取得し、そのvalueプロパティに空文字列（）を代入する docu

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

    JavaScriptでは、valueプロパティを使ってテキストボックスに入力された値を取得し、innerHTMLを使うことでその値を段落（<p>要素）に表示することができます。この仕組みは、フォームの入力内容をリアルタイムに画面へ反映させたい場合などによく使われる基本的なテクニックです。 コード例 以下が実際のサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">