HTML DOMのstepDown()メソッドとは？number型入力の値を減らす方法を解説
HTML DOMのstepDown()メソッドは、<input type="number">で作成した数値入力フィールドの値を、指定した数値分だけ減少させるためのメソッドです。ユーザーが手入力しなくてもボタン操作などで簡単に値を減らせるため、数量や年齢などを入力するフォームで活用できます。
構文
stepDown()メソッドの基本的な構文は以下の通りです。
object.stepDown(number)
numberパラメータには、一度に減らしたい値を指定します。このパラメータを省略した場合、値は1ずつ減少します。
stepUp()メソッドとの違い
stepDown()が値を「減らす」メソッドであるのに対し、stepUp()メソッドは値を「増やす」ためのメソッドです。両者はセットで使われることが多く、組み合わせることで数値入力の増減操作を直感的に実装できます。
サンプルコード
stepDown()メソッドの実際の動作を確認できるサンプルを見てみましょう。この例では、ボタンをクリックするたびに入力フィールドの値が10ずつ増加・減少します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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()">値を増やす（+10）</button>
<button onclick="decValue()">値を減らす（−10）</button>
<script>
function incValue() {
document.querySelector("input").stepUp(10);
}
function decValue() {
document.querySelector("input").stepDown(10);
}
</script>
</body>
</html>実行結果
上記のコードをブラウザで開くと、次のような画面が表示されます。
「値を増やす（+10）」または「値を減らす（−10）」ボタンをクリックすると、数値入力フィールドの値が10ずつ増加・減少します。
対応ブラウザ
stepDown()／stepUp()メソッドは、Chrome、Edge、Firefox、Safari、Operaなど主要なブラウザでサポートされています。古いブラウザ環境を対象とする場合は、事前に動作確認を行うことをおすすめします。
-
HTML DOM Input Number value プロパティとは？取得・設定方法を解説
HTML DOM の Input Number value プロパティは、type=number を持つ input 要素の value 属性に関連付けられたプロパティです。このプロパティを使うことで、input 要素の value 属性の値を取得したり、設定したりすることができます。要素の初期値（デフォルト値）を指定する目的でも活用され、ユーザーが入力を行うとその値に更新されます。 構文 value プロパティの構文は以下の通りです。 値を設定する場合 numberObject.value = number; ここで number には、数値フィールドに設定したい値を指定します。 サンプルコ
-
HTML DOM 入力レンジ（Range）のstepDown()メソッド徹底解説
HTML DOM Input Range stepDown()メソッドとはHTML DOMのInput Range stepDown()メソッドは、スライダー（レンジ入力）コントロールの値を指定した数だけ減少させるために使用します。引数を省略した場合は1ずつ減少します。さらに、step属性が指定されている場合は、そのステップ値の倍数単位で値が減っていきます。例えば、step=20が設定されている状態でstepDown(2)を実行すると、20×2＝40ずつ値が減少します。構文RangeオブジェクトのstepDown()メソッドの構文は以下の通りです。rangeObject.stepDown(nu