HTML DOM 입력 범위 stepUp() 메서드는 슬라이더 컨트롤 값을 지정된 숫자만큼 증가시키는 데 사용됩니다. 공백으로 두면 1씩 증가합니다. 단계 속성이 지정되면 stepUp() 메서드는 그 배수로 증가합니다. 예:step=”20”이면 stepUp(2)이 20*2=40씩 증가합니다.
구문
다음은 Range stepUp() 메서드의 구문입니다. -
rangeObject.stepUp(number)
여기서 number는 슬라이더 제어 증가 값을 지정하기 위한 필수 매개변수입니다. 공백으로 두면 1씩 증가합니다.
예시
범위 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> 출력
이것은 다음과 같은 출력을 생성합니다 -
INCREMENT 버튼을 클릭하면 -
위의 예에서 -
type="range, id="RANGE1" , name="VOL" −
형식의 입력 필드를 만들었습니다.<form> VOLUME <input type="range" id="RANGE1" name="VOL"> <form>
그런 다음 사용자가 클릭할 때 stepIncrement() 메서드를 실행할 버튼 INCREMENT를 만들었습니다.
<button type="button" onclick="stepIncrement()">INCREMENT</button>
stepIncrement() 메서드는 getElementById() 메서드를 사용하여 id "RANGE1"을 전달하여 유형 범위의 입력 필드를 가져오고 10이 증가 값으로 제공된 stepUp() 메서드를 호출합니다. 이렇게 하면 슬라이더가 10 −
증가합니다.function stepIncrement() {
document.getElementById("RANGE1").stepUp(10);
}