이번 글에서는 두 개의 버튼을 만들어 보겠습니다. 하나는 값을 증가시키는 버튼(+), 다른 하나는 값을 감소시키는 버튼(-)입니다.
증가(+) 버튼을 클릭하면 <input type="number"> 입력 필드의 숫자가 1씩 증가합니다.
감소(-) 버튼을 클릭하면 입력 필드의 숫자가 1씩 감소합니다.
핵심은 자바스크립트에서 기본 제공되는 stepUp()과 stepDown() 메서드입니다. 이 메서드들은 숫자 입력 필드의 현재 값을 지정된 단계(step)만큼 올리거나 내려주며, 별도의 연산 로직 없이 간단하게 구현할 수 있다는 장점이 있습니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<input id=demoInput type=number min=100 max=110>
<button onclick="increment()">+</button>
<button onclick="decrement()">-</button>
<script>
function increment() {
document.getElementById('demoInput').stepUp();
}
function decrement() {
document.getElementById('demoInput').stepDown();
}
</script>
</body>
</html>
위 예제에서는 입력 필드에 min=100, max=110 속성을 설정했습니다. 따라서 값은 최솟값 100 이하로 내려가거나 최댓값 110을 초과하지 않습니다.
실행 방법
위 프로그램을 실행하려면 파일 이름을 “anyName.html(index.html)”로 저장한 뒤, 해당 파일을 마우스 오른쪽 버튼으로 클릭합니다. 그런 다음 VS Code 편집기에서 “Open with Live Server” 옵션을 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.
실행 결과
코드를 실행하면 다음과 같은 화면이 나타납니다.
증가(+) 버튼을 클릭하면 값이 1씩 더해지고, 감소(-) 버튼을 클릭하면 값이 1씩 빼집니다.
여기서는 + 버튼을 한 번 클릭해 보겠습니다.
그러면 다음과 같은 출력 결과를 얻을 수 있습니다.
