SQL見るだけクエリ#179 複数の数値入力フィールドから合計値を計算するスクリプト

複数の数値入力フィールドから合計値を計算するスクリプトについて解説してみようと思います。

この記事を読むと（約5分）
複数の数値入力フィールドから合計値を計算するスクリプトについてイメージできます。

複数の数値入力フィールドから合計値を計算

合計値: 0

以下のコードは、HTMLとJavaScriptを使用して、数値の入力フィールドから合計値を計算し、表示するためのスクリプトです。まず、HTMLの部分では、4つの<input>要素があります。それぞれの入力フィールドにはnumber-inputというクラスが指定されています。 <p>要素の中にあるidがtotalの要素は、合計値を表示するための場所です。

<!DOCTYPE html>
<html>
<head>
  <title>合計値の計算</title>
</head>
<body>
  <input type="number" class="number-input">
  <input type="number" class="number-input">
  <input type="number" class="number-input">
  <input type="number" class="number-input">
  <p id="total">合計値: 0</p>

  <script>
    // 全てのnumber-input要素を取得
    const inputs = document.getElementsByClassName('number-input');

    // 合計値を計算する関数
    function calculateTotal() {
      let sum = 0;

      // 全てのinput要素の値を合計する
      for (let i = 0; i < inputs.length; i++) {
        const value = parseInt(inputs[i].value);
        if (!isNaN(value)) {
          sum += value;
        }
      }

      // 合計値を表示する
      document.getElementById('total').textContent = '合計値: ' + sum;
    }

    // 各input要素の変更を監視し、変更があった場合に合計値を再計算する
    for (let i = 0; i < inputs.length; i++) {
      inputs[i].addEventListener('input', calculateTotal);
    }
  </script>
</body>
</html>

JavaScriptの部分では、次のような処理が行われています。

document.getElementsByClassName('number-input')を使用して、number-inputクラスを持つ全ての要素を取得します。これらの要素は、数値を入力するための入力フィールドです。取得した要素はinputsという変数に格納されます。
calculateTotal()という関数が定義されます。この関数は、合計値を計算し、表示する役割を持ちます。
calculateTotal()関数内では、変数sumを定義して0で初期化します。この変数は合計値を保持します。
forループを使用して、inputs内のすべての要素に対してループ処理を行います。
ループ内では、各要素の値を取得し、parseInt()関数を使って数値に変換します。もし数値に変換できない場合（入力が空白や無効な文字列の場合）、isNaN()関数で判定し、無視します。
数値に変換できた場合は、その値を変数sumに加算します。
ループが終了したら、document.getElementById('total').textContentを使用して、合計値を表示するための要素のテキストコンテンツを変更します。合計値は、文字列として表示され、変数sumの値が組み込まれます。
最後のforループは、各input要素にinputイベントリスナーを追加します。つまり、ユーザーが入力フィールドの値を変更するたびに、calculateTotal()関数が実行され、合計値が再計算されます。

以上がこのコードの解説です。ユーザーが数値を入力するたびに、合計値が自動的に計算され、表示される仕組みです。