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

HTML DOM input number stepUp()メソッドの使い方を徹底解説

HTML DOM の stepUp() メソッドは、<input type="number"> で作成された数値入力フィールドの値を、指定した値だけ増加させるためのメソッドです。対になる stepDown() メソッドを使用すれば、値を減少させることもできます。

構文

stepUp() メソッドの基本構文は以下のとおりです。

object.stepUp(number)

number パラメータには、増加させたい値を指定します。このパラメータを省略した場合、値はデフォルトで 1 ずつ増加します。

サンプルコード

それでは、stepUp() メソッドと stepDown() メソッドを使った実際の動作例を見てみましょう。以下の例では、ボタンをクリックするたびに、数値入力フィールドの値が10ずつ増減します。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM stepUp()/stepDown() デモ</title>
<style>

    body{
        text-align:center;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)
        center/cover no-repeat;
        height:100vh;
        color:#fff;
    }

    p{
        font-size:1.5rem;
    }

    input{
        width:40%;
    }

    button{
        background-color:#db133a;
        color:#fff;
        padding:8px;
        border:none;
        width:120px;
        margin:1rem;
        border-radius:50px;
        outline:none;
        cursor:pointer;
    }

</style>
</head>
<body>
<h1>stepUp()/stepDown() メソッド デモ</h1>
<p>こんにちは！あなたは何歳ですか？</p>
<input type="number">
<br>
<button onclick="incValue()">値を増やす（StepUp）</button>
<button onclick="decValue()">値を減らす（StepDown）</button>
<script>
   function incValue() {
      document.querySelector("input").stepUp(10);
   }
   function decValue() {
      document.querySelector("input").stepDown(10);
   }
</script>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、次のような画面が出力されます。

HTML DOM input number stepUp()メソッドの使い方を徹底解説

続いて、「値を増やす（StepUp）」または「値を減らす（StepDown）」ボタンをクリックしてみましょう。クリックするたびに、数値入力フィールドの値が10ずつ増加・減少していきます。

HTML DOM input number stepUp()メソッドの使い方を徹底解説


HTML DOM input number stepUp()メソッドの使い方を徹底解説

まとめ

stepUp() / stepDown() メソッドを使うことで、JavaScriptから簡単に数値入力フィールドの値を操作できます。数量選択フォームやカウンターUIなど、ユーザーが数値を調整する場面で非常に便利なメソッドなので、ぜひ活用してみてください。

  1. HTML DOM Input Number value プロパティとは？取得・設定方法を解説

    HTML DOM の Input Number value プロパティは、type=number を持つ input 要素の value 属性に関連付けられたプロパティです。このプロパティを使うことで、input 要素の value 属性の値を取得したり、設定したりすることができます。要素の初期値（デフォルト値）を指定する目的でも活用され、ユーザーが入力を行うとその値に更新されます。 構文 value プロパティの構文は以下の通りです。 値を設定する場合 numberObject.value = number; ここで number には、数値フィールドに設定したい値を指定します。 サンプルコ

  2. 【HTML DOM】Input RangeのstepUp()メソッドの使い方を解説

    HTML DOMのInput Range（type=range）で利用できるstepUp()メソッドは、スライダーコントロールの現在値を指定した数だけ増加させるためのメソッドです。引数を省略した場合は1ずつ増加します。また、input要素にstep属性が指定されている場合は、そのstep値の倍数単位で値が増加します。たとえばstep=20が設定されている場合、stepUp(2)を実行すると20×2＝40だけ値が増加します。 構文 RangeオブジェクトのstepUp()メソッドの構文は以下のとおりです。 rangeObject.stepUp(number) numberは、スライダーの値をどれ