JavaScript로 숫자 자릿수 합 계산하기 – 버튼 클릭 시 각 자릿수의 합을 구하는 함수 만들기

이번 글에서는 사용자가 숫자를 입력할 수 있는 입력란을 제공하고, 버튼을 클릭하면 해당 숫자의 모든 자릿수의 합을 화면에 표시하는 JavaScript 프로그램을 작성해 보겠습니다.

예를 들어 사용자가 12345를 입력하고 제출 버튼을 클릭하면, 1+2+3+4+5가 계산되어 결과값 15가 출력됩니다.

구현 원리

핵심 로직은 다음과 같습니다.

• 입력 요소에서 값을 가져온 뒤 문자열로 처리합니다.
• split('') 메서드를 사용해 문자열을 한 글자씩 분리합니다.
• forEach()로 각 자릿수를 순회하며 parseInt()로 정수 변환 후 누적 합산합니다.
• 최종 결과를 출력 영역의 innerHTML에 표시합니다.

전체 예제 코드

JavaScript 코드

function myFunc() {
    var num = document.getElementById('digits').value;
    var tot = 0;
    num.split('').forEach(function (x) {
        tot = tot + parseInt(x, 10);
    });
    document.getElementById('output').innerHTML = tot;
}

HTML 코드

<input id="digits" />
<button onClick="myFunc()">Submit</button>
<div id="output"></div>

코드 설명

document.getElementById('digits').value는 입력란에 입력된 값을 가져옵니다. 이 값은 기본적으로 문자열이므로 split('')으로 개별 자릿수 배열로 만들 수 있습니다. 이후 forEach() 반복문 안에서 parseInt(x, 10)를 통해 각 문자를 10진법 정수로 변환하고 변수 tot에 더해 나갑니다. 마지막으로 계산된 합계를 id가 output인 div 요소에 출력합니다.

실행 결과

입력란에 숫자를 넣고 Submit 버튼을 클릭하기 전에는 아무것도 표시되지 않습니다.

버튼을 클릭하면 입력한 숫자의 각 자릿수 합이 아래 출력 영역에 즉시 표시됩니다.

마무리

이처럼 문자열 분리와 반복문만 활용하면 별도의 수학 연산 없이도 손쉽게 자릿수 합을 구할 수 있습니다. 음수나 소수점 입력에 대한 유효성 검사를 추가하면 더욱 견고한 프로그램을 만들 수 있습니다.