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

JavaScriptでユーザーが入力したHTMLの値を取得・解析して表示する方法

HTMLの入力フィールドから取得できる値は、常に文字列（string）として扱われます。そのため、取得した値を数値として計算などに利用したい場合は、parseInt()を使って文字列を整数に変換する必要があります。

さらに、入力された値が数値として有効かどうかをisNaN()で判定することで、不正な入力へのエラー処理も行えます。

実装例

以下は、テキストボックスに入力された値を取得し、整数として解析してコンソールに表示するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<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>
   <input type="text" id="txtInput" placeholder="Enter a number">
   <button type="button" onclick="result();">GetANumber</button>
</body>
<script>
   function result() {
      var numberValue = document.getElementById("txtInput").value;
      if (!isNaN(numberValue))
         console.log("The value=" + parseInt(numberValue));
      else
         console.log("Please enter the integer value..");
   }
</script>
</html>

プログラムの実行方法

上記のプログラムを実行するには、ファイルを「index.html」などの任意の名前で保存します。その後、VS Codeエディターでファイルを右クリックし、「Open with Live Server」を選択してブラウザーで開いてください。

実行結果

ページを開いた直後は、コンソールには何も表示されません。

JavaScriptでユーザーが入力したHTMLの値を取得・解析して表示する方法

次に、テキストボックスに数値を入力します。

JavaScriptでユーザーが入力したHTMLの値を取得・解析して表示する方法

続いてボタンをクリックすると、入力値が整数に変換されて出力されます。

JavaScriptでユーザーが入力したHTMLの値を取得・解析して表示する方法

コンソールには次のように表示されます。

JavaScriptでユーザーが入力したHTMLの値を取得・解析して表示する方法

コードのポイント

  • document.getElementById("txtInput").value で、入力フィールドの値を文字列として取得します。
  • isNaN() で、入力された値が数値として有効かどうかを判定します。数値でない場合はエラーメッセージを表示します。
  • parseInt() で文字列を整数に変換し、コンソールに出力します。

このように、HTMLからの入力値は必ず文字列として取得されるため、数値として扱う際はparseInt()やNumber()などによる型変換が重要になります。

  1. JavaScriptでtrタグのidを取得し、新しいtdセルに表示する方法

    はじめにHTMLテーブルの各行（<tr>タグ）に設定されたid属性を取得し、それを新しい<td>セルとして表示したいケースは開発現場でよく見られます。本記事では、JavaScriptのdocument.querySelectorAll()メソッドとinsertCell()メソッドを組み合わせて実現する方法を、実際のコード例とともにわかりやすく解説します。サンプルテーブルの準備まず、例として次のようなテーブルを用意します。<table>   <tr id=StudentDetails>      &

  2. Tkinterのテキストウィジェットに入力したテキストを取得して表示する方法

    TkinterのTextウィジェットは、テキストの挿入や情報の表示だけでなく、ウィジェット内に入力されたテキストを取得することもできます。ユーザーがTextウィジェットに入力した内容を取得するには、get()メソッドを使用します。この記事では、実際のコード例を通じて、入力内容を取得して画面に表示する方法を解説します。get()メソッドの基本的な使い方Textウィジェットのget()メソッドは、取得したい範囲の「開始位置」と「終了位置」を引数として指定します。よく使われる指定方法は以下の通りです。1.0 … 1行目の0文字目（テキストの先頭）から取得を開始するend-1c … テキスト末尾の自動