HTML DOMのinput month型 stepUp()メソッドの使い方を解説
HTML DOMのinput month（月入力フィールド）におけるstepUp()メソッドは、月フィールドの値を指定した数値だけ増加（インクリメント）させるためのメソッドです。対となるstepDown()メソッドと組み合わせることで、月の値を自由に増減させることができます。
構文
stepUp()メソッドの構文は以下の通りです。
object.stepUp(number)
引数のnumberには、増加させたい値を指定します。このパラメータを省略した場合は、値が1ずつ増加します。
サンプルコード
ここでは、input monthフィールドに対してstepUp()メソッドとstepDown()メソッドを使用した具体的な例を紹介します。
<!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="month">
<br>
<button onclick="incValue()">StepUp Value</button>
<button onclick="decValue()">StepDown Value</button>
<script>
function incValue() {
document.querySelector("input").stepUp();
}
function decValue() {
document.querySelector("input").stepDown();
}
</script>
</body>
</html>
実行結果
上記のコードをブラウザで実行すると、以下のような画面が表示されます。
「StepUp Value」ボタンをクリックすると月入力フィールドの値が1つ増加し、「StepDown Value」ボタンをクリックすると1つ減少します。
-
HTML DOM Input Week stepUp()メソッドの使い方をわかりやすく解説
HTML DOM の Input Week stepUp() メソッドは、<input type=week> で作成された週フィールドの値を、指定した週数だけ増加させるためのメソッドです。JavaScript から呼び出すことで、ユーザー操作なしに週の値を動的に進めることができます。stepUp() メソッドの構文stepUp() メソッドの基本的な構文は以下のとおりです。inputWeekObject.stepUp(number)引数 number には、増加させたい週数を数値で指定します。この引数は省略可能で、省略した場合のデフォルト値は 1 になります。つまり、引数なしで呼び
-
【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は、スライダーの値をどれ