【JavaScript】入力した数値の各桁の合計をボタンクリックで計算・表示する方法

はじめに

本記事では、ユーザーが数値を入力できるテキストボックスを用意し、ボタンがクリックされたときに、その数値の各桁の合計を計算して画面に表示するJavaScriptプログラムの作り方を解説します。

例えば「12345」と入力して送信ボタンを押すと、「1 + 2 + 3 + 4 + 5 = 15」というように、すべての桁の数字を足した結果が出力されます。

実装コード

まずは完成形のコードを見てみましょう。

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>

コードの仕組み

このプログラムがどのように動作しているのか、処理の流れを順番に見ていきましょう。

1. 入力値の取得： document.getElementById('digits').value により、入力フィールドに入力された文字列（数値）を取得します。
2. 文字列を1桁ずつ分割： split('') を使うことで、入力された文字列を1文字（1桁）ずつの配列に変換できます。
3. 各桁を数値化して加算： forEach() で配列の各要素をループ処理し、parseInt(x,10) で文字を10進数の整数に変換しながら、変数 tot に加算していきます。
4. 結果の表示： 最後に document.getElementById('output').innerHTML に合計値を代入することで、ページ上に計算結果を出力します。

実行結果

実際にブラウザで動作させると、以下のように表示されます。

数値を入力して「Submit」ボタンをクリックすると、次のように各桁の合計が表示されます。

まとめ

このように、split() と forEach() を組み合わせることで、数値を1桁ずつ分解して合計を求める処理をシンプルに実装できます。入力値は文字列として扱われるため、加算前に parseInt() で整数へ変換する点がポイントです。