TheHTMLInputElement.stepUp() method increments the valueof a numeric type of<input> element by the value of thestep attribute, or thedefaultstep value if the step attribute is not explicitly set. The method,when invoked, increments thevalue by(step * n), wheren defaults to1 if not specified, andstep defaults to thedefault value forstep if not specified.

The method, when invoked, changes the form control's value by the value given in thestep attribute, multiplied by the parameter, within the constraints set onthe form control. The default value for the parameter, if no value is passed, is1. The method will not cause the value to exceed thesetmax value, or defythe constraints set by thestep attribute.

If the value before invoking thestepUp() method is invalid—for example,if it doesn't match the constraints set by the step attribute—invoking thestepUp() method will return a value that does match the form controlsconstraints.

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 in thetable above), or if the step value is set toany, anInvalidStateError exception is thrown.

Syntax

stepUp()stepUp(stepIncrement)

Parameters

stepIncrementOptional

A numeric value. If no parameter is passed,stepIncrement defaults to1.

Return value

None (undefined).

Examples

Click the button in this example to increment 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>    Enter how many values of step you would like to increment by or leave it    blank:  </label>  <input type="number" step="1" min="0" max="25" /></p><input type="button" value="Increment" />

JavaScript

/* make the button call the function */const button = document.getElementById("theButton");button.addEventListener("click", () => {  stepOnUp();});function stepOnUp() {  let input = document.getElementById("theNumber");  let val = document.getElementById("incrementInput").value;  if (val) {    /* increment with a parameter */    input.stepUp(val);  } else {    /* or without a parameter. Try it with 0 */    input.stepUp();  }}

CSS

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

Result

Note if you don't pass a parameter to thestepUp method, it defaults to1. Any other value is a multiplier of thestep attributevalue, which in this case is5. If you pass4 as thestepIncrement, the input willstepUp by4 * 5, or20. If the parameter is0, the numberwill not be incremented. The stepUp will not allow the input to out of range, in thiscase stopping when it reaches400, and rounding down any floats that arepassed as a parameter.

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

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

Specifications

Browser compatibility

See also

• <input>
• HTMLInputElement
• HTMLInputElement.stepDown
• step,min andmax attributes