UI設計したり、ウェブシステムを開発したりします。 

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

記入日:2023-07-06 編集日:2023-07-06

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

この記事を読むと(約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の部分では、次のような処理が行われています。

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

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

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。