HTMLInputElement: stepUp() method - Web APIs | MDN (original) (raw)

Syntax

stepUp()
stepUp(stepIncrement)

Parameters

stepIncrement Optional

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

Return value

None (undefined).

Examples

Click the button in this example to increment the number 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" id="theNumber" 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" id="incrementInput" min="0" max="25" />
</p>
<input type="button" value="Increment" id="theButton" />

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 the stepUp method, it defaults to1. Any other value is a multiplier of the step attribute value, which in this case is 5. If you pass 4 as thestepIncrement, the input will stepUp by4 * 5, or 20. If the parameter is 0, the number will not be incremented. The stepUp will not allow the input to out of range, in this case stopping when it reaches 400, and rounding down any floats that are passed as a parameter.

Try setting the step increment input to 1.2. What happens when you invoke the method?

Try setting the value to 4, which is not valid. What happens when you invoke the method?

Specifications

Specification
HTML # dom-input-stepup-dev

Browser compatibility

See also