Search code examples
javascripthtmlhtml-input

How can I increment a number input?

When using HTML input elements I tried implementing the step attribute. This allowed me to add 100 to the current value by clicking the up/down arrows in the input field.

However, step determines legal values, so it won't work for simple increments. For example, if I type in 123, it will increase to 200, not 223.

// populate field
document.querySelector("input").value = "123";
<input type="number" step="100" value="0"/>

Is there an easy workaround for an increment/decrement function for the input element?

Solution

  • step pushes away from the attribute:

    const input = document.querySelector('input');
input.value = 123;
input.setAttribute('value', 123);
    <input type="number" step="100">

    UPDATE: Also, as @Barmar and @SebastianSimon pointed out, you can use defaultValue:

    input.defaultValue = 123;