TheHTMLInputElement.stepDown() method decrements thevalue of a numeric type of<input> element by the value of thestep attribute or upton multiples of the step attribute if a number is passed as theparameter.

The method, when invoked, decrements thevalue by (step * n), where ndefaults to 1 if not specified, andstep defaults to thedefault value forstep if not specified.

Valid on all numeric, date, and time input types that support the step attribute,includingdate,month,week,time,datetime-local,number, andrange.

Given<input type="time" max="17:00" step="900" value="17:00">,invokingmyTime.stepDown(3) will change the value to 16:15, decrementing thetime by3 * 900, or 45 minutes.myTime.stepDown(), with noparameter, would have resulted in16:45, asn defaults to1.

<!-- decrements by intervals of 900 seconds (15 minute) --><input type="time" max="17:00" step="900" /><!-- decrements by intervals of 7 days (one week) --><input type="date" max="2019-12-25" step="7" /><!-- decrements by intervals of 12 months (one year) --><input type="month" max="2019-12" step="12" />

However, callingstepDown on<input type="time" max="17:00" step="900"> would not set the value to17:00, as one would expect — and as it does forstepUp when the input is<input type="time" min="17:00" step="900">. Instead, the first call tostepDown will set the initial value to23:45 even though themax attribute is set. The second call will set the value to17:00. And the third call to will set the value to16:45.

let input1 = document.createElement("input");input1.setAttribute("type", "time");input1.setAttribute("min", "17:00");input1.setAttribute("step", 900);console.log(input1.value); // ""input1.stepUp();console.log(input1.value); // "17:00"// Howeverlet input2 = document.createElement("input");input2.setAttribute("type", "time");input2.setAttribute("max", "17:00");input2.setAttribute("step", 900);console.log(input2.value); // ""input2.stepDown();console.log(input2.value); // "23:45"input2.stepDown();console.log(input2.value); // "17:00"input2.stepDown();console.log(input2.value); // "16:45"

The method, when invoked, changes the form control's value by the value given in thestep attribute, multiplied by the parameter, within the constraints setwithin the form control. The default value for the parameter, if not is passed, is 1.The method will not cause the value to go below themin value set or defy theconstraints set by thestep attribute. Anegative value forn will increment the value, but will not incrementbeyond themax value.

If the value before invoking thestepDown() method is invalid, forexample, if it doesn't match the constraints set by thestep attribute,invoking thestepDown() method will return a value that does match the formcontrols constraints.

If the form control is non time, date, or numeric in nature, and therefore does notsupport thestep attribute (see the list of supported input types above), or if thestep value is set toany, anInvalidStateError exception is thrown.

Syntax

stepDown()stepDown(stepDecrement)

Parameters

stepDecrementOptional

A numeric value. If no parameter is passed,stepDecrement defaults to 1.

If the value is a float, the value will decrement as ifMath.floor(stepDecrement)was passed. If the value is negative, the value will be incremented instead ofdecremented.

Return value

None (undefined).

Exceptions

InvalidStateErrorDOMException

Thrown in one of the following cases:

• if the method is not applicable to for the currenttype value,
• if the element has nostep value,
• if thevalue cannot be converted to a number,
• if the resulting value is above themax or below themin.

Examples

Click the button in this example to decrement thenumber input type:

HTML

<p>  <label for="theNumber">    Enter a number between 0 and 400 that is divisible by 5:  </label>  <input type="number" step="5" min="0" max="400" /></p><p>  <label for="decrementButton">    Enter how many values of step you would like to decrement by or leave it    blank:  </label>  <input type="number" step="1" min="-2" max="15" /></p><input type="button" value="Decrement" />

JavaScript

/* make the button call the function */let button = document.getElementById("theButton");button.addEventListener("click", () => {  stepOnDown();});function stepOnDown() {  let input = document.getElementById("theNumber");  let val = document.getElementById("decrementInput").value;  if (val) {    // decrement with a parameter    input.stepDown(val);  } else {    // or without a parameter. Try it with 0, 5, -2, etc.    input.stepDown();  }}

CSS

input:invalid {  border: red solid 3px;}

Result

Note if you don't pass a parameter to thestepDown() method, it defaultsto 1. Any other value is a multiplier of thestep attribute value, which inthis case is 5. If we pass4 as thestepDecrement, the input willstepDown by4 * 5, or20. If the parameter is0, the number will not bedecremented. ThestepDown() method will not allow the input to go out of range, in thiscase stopping when it reaches 0 and rounding down and floats that are passed as aparameter.

Try setting the step decrement input to1.2. What happens when you invoke themethod?

Try setting the value to44, which is not valid. What happens when youinvoke the method?

Specifications

Browser compatibility

See also

• <input>
• HTMLInputElement
• HTMLInputElement.stepUp()
• step,min andmax attributes