Bagaimana untuk menambah bilangan yang dimasukkan?

Question

Apabila menggunakan HTML input 元素时，我尝试实现 step atribut. Dengan cara ini saya boleh menambah 100 kepada nilai semasa dengan mengklik pada anak panah atas/bawah dalam medan input.

Walau bagaimanapun, step menentukan nilai undang-undang, jadi ia tidak berfungsi dengan kenaikan mudah. Sebagai contoh, jika saya memasukkan 123, ia akan meningkat kepada 200, bukan 223.

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

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

Adakah terdapat penyelesaian mudah untuk input fungsi penambahan/penurunan mengikut unsur?

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>

Dalam fungsi panggil balik, kami menggunakan kaedah terbina dalam stepUp() dan stepDown() untuk menambah dan mengurangkan nilai input masing-masing sebanyak 100. Kaedah ini memastikan bahawa nilai input diubah suai dengan betul tanpa mengira sifat langkah.

Answer 2

step Atribut tolak jauh:

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

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