HTML DOM Input Range Phương thức stepUp ()

Phương thức stepUp () trong phạm vi đầu vào HTML DOM được sử dụng để tăng giá trị điều khiển thanh trượt lên một số cụ thể. Nếu để trống thì nó sẽ tăng lên 1. Nếu thuộc tính step được chỉ định thì phương thức stepUp () sẽ tăng lên bội số. Ví dụ:If step =”20” thì stepUp (2) sẽ tăng thêm 20 * 2 =40

Cú pháp

Sau đây là cú pháp cho phương thức Range stepUp () -

rangeObject.stepUp(number)

Ở đây, số là một tham số bắt buộc để chỉ định giá trị gia tăng điều khiển thanh trượt. Nếu để trống, nó sẽ tăng lên 1.

Ví dụ

Chúng ta hãy xem một ví dụ cho phương thức range stepUp () -

<!DOCTYPE html>
<html>
<body>
<h1>Input range stepUp() method</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Increment the slider control value by clicking the below button</p>
<button type="button" onclick="stepIncrement()">INCREMENT</button>
<p id="Sample"></p>
<script>
   function stepIncrement() {
      document.getElementById("RANGE1").stepUp(10);
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

HTML DOM Input Range Phương thức stepUp ()

Khi nhấp vào nút TĂNG -

HTML DOM Input Range Phương thức stepUp ()

Trong ví dụ trên -

Chúng tôi đã tạo một trường đầu vào chứa bên trong một biểu mẫu có type =“range, id =“ RANGE1 ”, name =“ VOL ”-

<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
<form>

Sau đó, chúng tôi đã tạo một nút INCREMENT sẽ thực thi phương thức stepIncrement () khi được người dùng nhấp vào -

<button type="button" onclick="stepIncrement()">INCREMENT</button>

Phương thức stepIncrement () sử dụng phương thức getElementById () để lấy trường đầu vào với phạm vi kiểu bằng cách chuyển id “RANGE1” cho nó và gọi phương thức stepUp () trên đó với 10 được cung cấp dưới dạng giá trị gia tăng. Điều này sẽ tăng thanh trượt lên 10 -

function stepIncrement() {
   document.getElementById("RANGE1").stepUp(10);
}