ใช้เมธอด HTML DOM Input Range stepUp() เพื่อเพิ่มค่าการควบคุมตัวเลื่อนด้วยตัวเลขที่ระบุ หากเว้นว่างไว้ จะเพิ่มขึ้น 1. หากระบุแอตทริบิวต์ของขั้นตอน วิธีการ stepUp() จะเพิ่มขึ้นเป็นทวีคูณ เช่น ถ้า step=”20” แล้ว stepUp(2) จะเพิ่มขึ้น 20*2=40
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับเมธอด Range stepUp() -
rangeObject.stepUp(number)
ในที่นี้ ตัวเลขเป็นพารามิเตอร์บังคับสำหรับการระบุค่าการเพิ่มตัวควบคุมตัวเลื่อน หากเว้นว่างไว้จะเพิ่มขึ้น 1
ตัวอย่าง
ลองดูตัวอย่างสำหรับ range stepUp() method -
<!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> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกที่ปุ่ม INCREMENT -
ในตัวอย่างข้างต้น −
เราได้สร้างช่องใส่ข้อมูลที่อยู่ภายในแบบฟอร์มที่มี type=“range, id=“RANGE1” , name=“VOL” −
<form> VOLUME <input type="range" id="RANGE1" name="VOL"> <form>
จากนั้นเราได้สร้างปุ่ม INCREMENT ที่จะรันเมธอด stepIncrement() เมื่อผู้ใช้คลิก -
<button type="button" onclick="stepIncrement()">INCREMENT</button>
เมธอด stepIncrement() ใช้เมธอด getElementById() เพื่อรับฟิลด์อินพุตที่มีช่วงประเภทโดยส่ง id "RANGE1" ไปที่มันและเรียกเมธอด stepUp() กับ 10 ที่ให้มาเป็นค่าที่เพิ่มขึ้น สิ่งนี้จะเพิ่มตัวเลื่อนขึ้น 10 -
function stepIncrement() {
document.getElementById("RANGE1").stepUp(10);
} 