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

ユーザー入力から数値を取得し、JavaScriptでコンソールに表示する方法

document.querySelectorでユーザー入力を取得する

JavaScriptでは、document.querySelector("#id名")を使用することで、ユーザーがボタンをクリックしたタイミングで入力フィールドの値を簡単に取得できます。IDセレクタで要素を指定する場合は、先頭に「#」を付けるのがポイントです。

以下は、ユーザーが入力した数値をボタンクリック時に取得し、コンソールに表示するJavaScriptコードのサンプルです。

コード例

<!DOCTYPE html>
<html lang="en">
<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>
<div class="container container-fluid">
<p><strong>例:</strong> 1から100までの数値を選んでください</p>
<form>
<div class="form-group">
<label for="number">数値を入力してください:</label>
<input id="inputNumber" value="" type="text" name="number" />
</form>
<p id="output"></p>
</div>
<button class="btn btn-dark" id="choose" type="submit">Click Me</button>
</body>
<script>
    function example() {
        let btn = document.querySelector("#choose");
        let randomNumber = Math.ceil(Math.random() * 100);
        btn.onclick = function() {
            let givenNumber = document.querySelector("#inputNumber").value;
            let valueInt = parseInt(givenNumber, 100);
            console.log(randomNumber, givenNumber);
        };
    }
    example();
</script>
</html>

コードのポイント

  • Math.ceil(Math.random() * 100):1〜100の範囲でランダムな整数を生成します。
  • document.querySelector("#inputNumber").value:入力フィールドに入力された文字列を取得します。
  • parseInt():取得した文字列を整数に変換します。なお、第2引数(基数)には通常10を指定するのが一般的です。
  • console.log(randomNumber, givenNumber):生成した乱数とユーザーの入力値をまとめてコンソールに出力します。

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

実行結果

まず、ブラウザ上でテキストフィールドに数値を入力します。

ユーザー入力から数値を取得し、JavaScriptでコンソールに表示する方法

値を入力した状態は次のようになります。

ユーザー入力から数値を取得し、JavaScriptでコンソールに表示する方法

その後、「Click Me」ボタンをクリックすると、開発者ツールのコンソールに生成された乱数とユーザーが入力した値が表示されます。

ユーザー入力から数値を取得し、JavaScriptでコンソールに表示する方法

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

    HTMLの入力フィールドから取得できる値は、常に文字列（string）として扱われます。そのため、取得した値を数値として計算などに利用したい場合は、parseInt()を使って文字列を整数に変換する必要があります。さらに、入力された値が数値として有効かどうかをisNaN()で判定することで、不正な入力へのエラー処理も行えます。実装例以下は、テキストボックスに入力された値を取得し、整数として解析してコンソールに表示するサンプルコードです。<!DOCTYPE html> <html lang="ja"> <head>    

  2. JavaScriptでCSS変数を取得・設定する方法

    JavaScriptを活用すると、CSS変数（カスタムプロパティ）の値を動的に読み取ったり、書き換えたりすることができます。ポイントになるのは、次の3つのメソッドです。 1. getComputedStyle() ― 適用済みスタイルの取得 getComputedStyle()メソッドは、対象の要素に実際に適用されているすべてのスタイル情報を含むオブジェクトを返します。このオブジェクトには、CSS変数の値も含まれています。 2. getPropertyValue() ― 目的のプロパティ値の取得 getComputedStyle()が返したオブジェクトに対してgetPropertyVal