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

JavaScriptでinput type=numberの値を増減させる＋／−ボタンを実装する方法

本記事では、<input type="number"> の値を操作するためのボタンを2つ作成します。ひとつは値を増やす「インクリメント（＋）」、もうひとつは値を減らす「デクリメント（−）」です。

  • インクリメント（＋）ボタンをクリックすると、数値入力欄の値が1ずつ増加します。
  • デクリメント（−）ボタンをクリックすると、数値入力欄の値が1ずつ減少します。

ポイントは、HTML5の <input type="number"> 要素が標準で持っている stepUp() メソッドと stepDown() メソッドを活用する点です。これらを使えば、複雑な計算処理を書かなくても、最小値・最大値・ステップ幅の制御をブラウザ側が自動的に行ってくれます。

サンプルコード

<!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>
<body>
<input id="demoInput" type="number" min="100" max="110">
<button onclick="increment()">+</button>
<button onclick="decrement()">-</button>
<script>
    function increment() {
        document.getElementById('demoInput').stepUp();
    }
    function decrement() {
        document.getElementById('demoInput').stepDown();
    }
</script>
</body>
</html>

コードの解説

  • min="100" max="110" を指定することで、入力できる値の範囲を100〜110に制限しています。この範囲を超えて stepUp() や stepDown() を呼び出しても、値はそれ以上変化しません。
  • increment() 関数では stepUp() メソッドを呼び出し、現在の値にステップ幅（デフォルトは1）を加算します。
  • decrement() 関数では stepDown() メソッドを呼び出し、現在の値からステップ幅を減算します。
  • ボタンの onclick 属性からそれぞれの関数を呼び出しているため、追加のイベントリスナー登録も不要でシンプルな実装になっています。

プログラムの実行方法

上記のコードを「index.html」などの任意のファイル名で保存します。その後、ファイルを右クリックし、VS Codeの拡張機能「Live Server」がインストールされている場合は「Open with Live Server」を選択してブラウザで開きましょう。Live Serverを使用しない場合は、保存したHTMLファイルを直接ダブルクリックしてブラウザで表示することでも動作を確認できます。

実行結果

ブラウザで表示すると、数値入力欄と「＋」「−」の2つのボタンが並んで表示されます。

JavaScriptでinput type=numberの値を増減させる＋／−ボタンを実装する方法

初期状態では値が100に設定されています。ここで「＋」ボタンをクリックすると、値が1つずつ増加していきます。

JavaScriptでinput type=numberの値を増減させる＋／−ボタンを実装する方法

逆に「−」ボタンをクリックすると、値が1つずつ減少します。最大値の110や最小値の100に達すると、それ以上の増減は自動的に停止するため、不正な値が入力される心配もありません。

このように、stepUp() / stepDown() を使った実装は非常にシンプルでありながら、数値の範囲チェックまで自動的に行ってくれるため、フォームUIのユーザビリティ向上に役立ちます。

  1. JavaScriptでHTMLボタンをクリックしたときにアラートを表示する方法

    ボタンをクリックしたときにアラートを表示するには、JavaScriptのaddEventListener()メソッドを使用します。例として、HTMLページ上に以下のようなボタンが配置されている場合を考えてみましょう。<button type=button>Please Press Me</button>サンプルコード以下は、ボタンがクリックされたときにアラートを表示する完全なコード例です。<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8> &

  2. HTML DOM Input Number type プロパティとは？使い方をわかりやすく解説

    HTML DOM の Input Number type プロパティは、type 属性が「number」に設定された input 要素に関連付けられたプロパティです。このプロパティは、数値入力フィールド（<input type=number>）に対して常に文字列「number」を返します。JavaScript でフォーム要素の種類を動的に確認したい場合などに役立ちます。 構文 Input Number type プロパティの構文は以下のとおりです。 numberObject.type サンプルコード HTML DOM Input Number type プロパティの具体的な使用