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

HTML DOMのInput Week stepDown()メソッドの使い方を解説

HTML DOM の Input Week stepDown() メソッドは、週フィールド（<input type="week">）に入力されている日付を、指定した週数分だけ減少させるために使用されるメソッドです。

構文

stepDown() メソッドの基本的な構文は以下のとおりです。引数には減らしたい週数を数値で指定します。引数を省略した場合、デフォルト値として 1 が適用され、1週間ずつ値が減少します。

inputWeekObject.stepDown(number)

パラメータ

  • number（任意）：週フィールドの値を減少させる週数を指定します。省略した場合は 1 になります。

使用例

ここでは、Input Week stepDown() メソッドの実際の動作を確認できるサンプルコードを紹介します。ボタンをクリックすると、それぞれ指定した週数だけ日付が減ります。

<!DOCTYPE html>
<html>
<head>
<title>Input Week stepDown()</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-stepDown( )</legend>
<label for="WeekSelect">Week and Year :
<input type="week" id="WeekSelect" value="2055-W04">
</label>
<input type="button" onclick="changeStep('2')" value="Decrease Weeks by 2">
<input type="button" onclick="changeStep('3')" value="Decrease Weeks by 3">
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputWeek = document.getElementById("WeekSelect");
    function changeStep(myStep) {
        inputWeek.stepDown(myStep);
    }
</script>
</body>
</html>

実行結果

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

ボタンをクリックする前の初期状態：

HTML DOMのInput Week stepDown()メソッドの使い方を解説

「Decrease Weeks by 2」ボタンをクリックした場合、値は2週間分減少します：

HTML DOMのInput Week stepDown()メソッドの使い方を解説

「Decrease Weeks by 3」ボタンをクリックした場合、値は3週間分減少します：

HTML DOMのInput Week stepDown()メソッドの使い方を解説

補足

stepDown() メソッドとは逆に、週フィールドの値を増加させたい場合は stepUp() メソッドを使用します。両方のメソッドを使い分けることで、ユーザーが直感的に週を選択できるインターフェースを簡単に構築できます。なお、このメソッドは主要なモダンブラウザでサポートされています。

  1. HTML DOM Input Week stepUp()メソッドの使い方をわかりやすく解説

    HTML DOM の Input Week stepUp() メソッドは、<input type=week> で作成された週フィールドの値を、指定した週数だけ増加させるためのメソッドです。JavaScript から呼び出すことで、ユーザー操作なしに週の値を動的に進めることができます。stepUp() メソッドの構文stepUp() メソッドの基本的な構文は以下のとおりです。inputWeekObject.stepUp(number)引数 number には、増加させたい週数を数値で指定します。この引数は省略可能で、省略した場合のデフォルト値は 1 になります。つまり、引数なしで呼び

  2. 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