I tried to implement the step attribute when using the HTML input element. This way I can add 100 to the current value by clicking on the up/down arrows in the input field.
However, step determines legal values, so it does not work with simple increments. For example, if I enter 123, it will increase to 200, not 223.
// populate field
document.querySelector("input").value = "123";
<input type="number" step="100" value="0"/>
Is there a simple solution for increment/decrement functions for input elements?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 });In the callback function, we use the built-in methods stepUp() and stepDown() to increment and decrement the input value by 100 respectively. These methods ensure that input values are modified correctly regardless of step properties.
stepPush away attribute:const input = document.querySelector('input'); input.value = 123; input.setAttribute('value', 123);