HTML DOM input number stepUp() 메서드 – 사용법과 예제 총정리

HTML DOM의 input number stepUp() 메서드는 숫자 입력 필드(number 타입 input)의 값을 지정한 값만큼 증가시키는 기능을 합니다. 반대로 값을 감소시키고 싶다면 stepDown() 메서드를 사용하면 됩니다.

문법(Syntax)

stepUp() 메서드의 기본 문법은 다음과 같습니다.

object.stepUp(number)

여기서 number 매개변수는 선택 사항입니다. 만약 이 매개변수를 생략하면 기본값인 1만큼 값이 증가합니다.

예제(Example)

아래 예제는 HTML DOM input number stepUp() 메서드와 stepDown() 메서드를 함께 사용한 데모입니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM stepUp()/stepDown() Demo</title>
<style>

    body{
       text-align:center;
       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)
       center/cover no-repeat;
       height:100vh;
       color:#fff;
   }

    p{
       font-size:1.5rem;
   }

    input{
       width:40%;
   }

    button{
       background-color:#db133a;
       color:#fff;
       padding:8px;
       border:none;
       width:120px;
       margin:1rem;
       border-radius:50px;
       outline:none;
       cursor:pointer;
   }

</style>
</head>
<body>
<h1>stepUp()/stepDown() Method Demo</h1>
<p>Hi! How old are you?</p>
<input type="number">
<br>
<button onclick="incValue()">StepUp Value</button>
<button onclick="decValue()">StepDown Value</button>
<script>
   function incValue() {
      document.querySelector("input").stepUp(10);
   }
   function decValue() {
      document.querySelector("input").stepDown(10);
   }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM input number stepUp() 메서드 – 사용법과 예제 총정리

이제 “StepUp Value” 버튼 또는 “StepDown Value” 버튼을 클릭해 보세요. 버튼을 클릭할 때마다 숫자 입력 필드의 값이 각각 10씩 증가하거나 감소하는 것을 확인할 수 있습니다.

HTML DOM input number stepUp() 메서드 – 사용법과 예제 총정리

핵심 정리

stepUp(n): 입력 필드의 값을 n만큼 증가시킵니다. 인자를 생략하면 1씩 증가합니다.
stepDown(n): 입력 필드의 값을 n만큼 감소시킵니다. 인자를 생략하면 1씩 감소합니다.
두 메서드 모두 <input type="number"> 요소에서만 동작하며, min/max 속성이 설정되어 있다면 해당 범위를 벗어나지 않습니다.