HTML DOM 숫자 입력 stepDown() 메서드 사용법과 예제

HTML DOM의 stepDown() 메서드는 숫자 타입(<input type="number">) 입력 필드의 값을 지정한 값만큼 감소시키는 기능을 합니다. 반대로 값을 증가시킬 때는 stepUp() 메서드를 사용합니다.

문법(Syntax)

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

object.stepDown(number)

여기서 number 매개변수는 선택 사항입니다. 매개변수를 생략하면 입력 필드의 값이 기본적으로 1씩 감소하며, 값을 지정하면 해당 값만큼 한 번에 감소합니다.

예제(Example)

다음은 stepUp()과 stepDown() 메서드를 함께 활용한 실전 예제입니다. 버튼을 클릭하면 나이 입력 필드의 값이 10씩 증가하거나 감소합니다.

<!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>

코드 설명

incValue() 함수: stepUp(10)을 호출하여 입력 필드의 값을 10씩 증가시킵니다.
decValue() 함수: stepDown(10)을 호출하여 입력 필드의 값을 10씩 감소시킵니다.
document.querySelector("input"): 페이지에서 첫 번째 input 요소를 선택합니다.

실행 결과(Output)

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

HTML DOM 숫자 입력 stepDown() 메서드 사용법과 예제

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

HTML DOM 숫자 입력 stepDown() 메서드 사용법과 예제

정리

stepDown() 메서드는 수량 조절, 나이 입력 등 숫자 값을 단계별로 조정해야 하는 UI에서 유용하게 활용됩니다. 매개변수 없이 호출하면 1씩 감소하고, 원하는 값을 인자로 전달하면 그 값만큼 한 번에 감소시킬 수 있다는 점을 기억하세요.