How can I increment a number input?

Question

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?

step is not just increments, it also implies that values must be a multiple of step. — Barmar
– Barmar, Commented Jun 14, 2023 at 20:41
Should be easy enough to write a function that increments/decrements by the step you want without using the step attribute — j08691
– j08691, Commented Jun 14, 2023 at 20:42
@j08691 I was wondering if writing a increment function would be unnecessary — EE2021
– EE2021, Commented Jun 14, 2023 at 20:45

imhvost · Accepted Answer · 2023-06-14 21:18:48Z

4

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;

edited Jun 14, 2023 at 21:18

answered Jun 14, 2023 at 20:44

imhvost

11.7k2 gold badges13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Barmar Over a year ago

Don't just post code, explain what was wrong and how you fixed it.

Barmar Over a year ago

Specifically, it's based on the initial value attribute.

imhvost Over a year ago

@Barmar sorry, I'll write the code first, then I'll explain. But it seems so clear if setAttribute is specified. With best regards.

Sebastian Simon Over a year ago

The initial value is the defaultValue property. No need to use setAttribute.

imhvost Over a year ago

Yes, defaultValue also works. I'll add that to my answer if you don't mind.

Bhavesh Ajani · Accepted Answer · 2023-06-14 21:16:01Z

const input = document.getElementById("myInput");
const incrementBtn = document.getElementById("incrementBtn");
const decrementBtn = document.getElementById("decrementBtn");

incrementBtn.addEventListener("click", () => {
  input.stepUp(100); // Increment the input value by 1
});

decrementBtn.addEventListener("click", () => {
  input.stepDown(100); // Decrement the input value by 1
});

<input id="myInput" type="number" value="123" min="0" step="1" />
<button id="incrementBtn">Increment</button>
<button id="decrementBtn">Decrement</button>

Inside the callback functions, we use the built-in methods stepUp() and stepDown() to increment and decrement the input value by 100, respectively. These methods ensure the input value is modified correctly, regardless of the step attribute.

Collectives™ on Stack Overflow

How can I increment a number input?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related