HTML DOM Input Week stepUp()メソッドの使い方をわかりやすく解説
HTML DOM の Input Week stepUp() メソッドは、<input type="week"> で作成された週フィールドの値を、指定した週数だけ増加させるためのメソッドです。JavaScript から呼び出すことで、ユーザー操作なしに週の値を動的に進めることができます。
stepUp() メソッドの構文
stepUp() メソッドの基本的な構文は以下のとおりです。
inputWeekObject.stepUp(number)
引数 number には、増加させたい週数を数値で指定します。この引数は省略可能で、省略した場合のデフォルト値は 1 になります。つまり、引数なしで呼び出すと、週フィールドの値が1週間分だけ進みます。
Input Week stepUp() の使用例
ここでは、実際に stepUp() メソッドを使って週フィールドの値を増加させるサンプルコードを紹介します。ボタンをクリックすると、それぞれ25週分・50週分ずつ値が増加する仕組みです。
<!DOCTYPE html>
<html>
<head>
<title>Input Week stepUp()</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Week-stepUp( )</legend>
<label for="WeekSelect">週と年 :
<input type="week" id="WeekSelect" value="2006-W44">
</label>
<input type="button" onclick="changeStep('25')" value="25週増やす">
<input type="button" onclick="changeStep('50')" value="50週増やす">
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputWeek = document.getElementById("WeekSelect");
function changeStep(myStep) {
inputWeek.stepUp(myStep);
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のような画面が表示されます。
ボタンをクリックする前：
初期値として「2006-W44」（2006年の第44週）が設定された週フィールドが表示されます。
「25週増やす」ボタンをクリックした後：
週フィールドの値が25週分だけ増加し、表示される年と週が更新されます。
「50週増やす」ボタンをクリックした後：
さらに50週分だけ値が増加します。年をまたいで週が進む場合も、自動的に正しく計算されます。
まとめ
stepUp() メソッドを使うことで、週フィールドの値を簡単に増加させることができます。逆に値を減少させたい場合は、stepDown() メソッドを使用します。フォームのカスタム操作や日付関連の UI を実装する際に便利なメソッドなので、ぜひ活用してみてください。
-
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は、スライダーの値をどれ