버튼 클릭으로 값 더하기
이번 글에서는 버튼을 클릭할 때마다 특정 값을 누적해서 더하는 JavaScript 기능을 만들어 보겠습니다.
먼저 아래와 같은 버튼이 있다고 가정해 봅시다.
<button type="button" onclick="addTheValue(10)">Sum </button>
위 버튼은 클릭될 때 addTheValue(10) 함수를 매개변수 10과 함께 호출합니다. 즉, 버튼을 클릭할 때마다 현재 표시된 값에 10씩 더해지는 방식입니다.
전체 예제 코드
아래는 완성된 HTML 코드입니다.
<!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>
</head>
<body>
<p><h1>Sum 버튼을 클릭할 때마다 10씩 더해집니다......</h1></p>
<b id="firstValue">10</b>
<button type="button" onclick="addTheValue(10)">Sum </button>
<script>
function addTheValue(secondValue) {
var fValue = document.getElementById("firstValue");
firstValue.innerHTML = parseInt(fValue.innerHTML) +
parseInt(secondValue);
}
</script>
</body>
</html>코드 동작 원리
핵심 로직은 addTheValue() 함수에 있습니다.
document.getElementById("firstValue")를 사용해 화면에 표시된 현재 값을 가져옵니다.parseInt()로 문자열 상태의 숫자를 정수형으로 변환한 후, 매개변수로 전달받은 값과 더합니다.- 연산 결과를 다시
innerHTML에 대입해 화면에 갱신합니다.
이처럼 문자열로 저장된 값은 그대로 더하면 연결(concatenation)되기 때문에 반드시 parseInt()나 Number()로 변환해 주어야 합니다.
실행 방법
위 프로그램을 실행하려면 파일 이름을 index.html로 저장한 뒤, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 “Open with Live Server” 옵션을 선택하면 됩니다.
그러면 아래와 같은 초기 화면이 출력됩니다.
이제 Sum 버튼을 처음으로 클릭해 보겠습니다.
버튼을 클릭하면 값이 10에서 20으로 갱신되며, 다음과 같은 결과가 출력됩니다.
버튼을 계속 클릭할 때마다 값이 10씩 누적되어 증가하는 것을 확인할 수 있습니다.