如何增加輸入的數字？

Question

當使用 HTML input 元素時，我嘗試實作 step 屬性。這樣我就可以透過點擊輸入欄位中的向上/向下箭頭將當前值加 100。

但是，step 決定合法值，因此它不適用於簡單的增量。例如，如果我輸入 123，它將增加到 200，而不是 223。

// populate field
document.querySelector("input").value = "123";

<input type="number" step="100" value="0"/>

對於 input 元素的遞增/遞減函數是否有簡單的解決方法？

Answer 1

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>

在回呼函數中，我們使用內建方法stepUp()和stepDown()分別將輸入值遞增和遞減100。這些方法可確保正確修改輸入值，無論步驟屬性為何。

Answer 2

step 推離屬性：

const input = document.querySelector('input');
input.value = 123;
input.setAttribute('value', 123);

<input type="number" step="100">