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

SQL見るだけクエリ#109 JavaScriptを活用して、商品数を変更するたびに小計・合計を計算する処理

記入日:2023-04-27 編集日:2023-04-27

JavaScriptを活用して、商品数を変更するたびに小計・合計を計算する処理を解説してみようと思います。

この記事を読むと(約5分)
JavaScriptを活用して、商品数を変更するたびに小計・合計を計算する処理する方法がイメージできます。

商品数を変更するたびに小計・合計を計算

function formatNumber(num) {
    return new Intl.NumberFormat('ja-JP').format(num);
}

function updateSubtotal(item, price) {
    const quantity = parseInt(document.getElementById(`quantity${item}`).value);
    const subtotal = quantity * price;
    document.getElementById(`subtotal${item}`).textContent = `${formatNumber(subtotal)}円`;
    updateTotal();
}

function updateTotal() {
    const subtotals = Array.from(document.querySelectorAll('[id^="subtotal"]'));
    const total = subtotals.reduce((acc, el) => acc + parseInt(el.textContent.replace('円', '').replace(',', '')), 0);
    document.getElementById('total').textContent = `${formatNumber(total)}円`;
}

このスクリプトには、以下の3つの関数が含まれています。

formatNumber(num)関数
この関数は、引数として渡された数値を日本円の通貨形式にフォーマットして返します。この関数は、Intl.NumberFormatコンストラクタを使用して、ja-JPの地域設定を指定しています。

updateSubtotal(item, price)関数
この関数は、商品番号(item)と価格(price)を引数として受け取ります。この関数は、指定された商品番号の数量を取得し、価格と掛け合わせて小計を計算します。そして、小計を日本円の通貨形式にフォーマットして、対応するHTML要素のテキストとして設定します。また、この関数は、updateTotal()関数を呼び出して、合計値を更新します。

updateTotal()関数
この関数は、各商品の小計を合計して、合計金額を計算します。この関数は、HTMLの id 属性が "subtotal" で始まる要素を取得し、配列として保存します。そして、 reduce() メソッドを使用して、小計の値を合計します。最後に、合計金額を日本円の通貨形式にフォーマットして、対応するHTML要素のテキストとして設定します。

このスクリプトは、HTMLファイル内の適切な場所で読み込まれる必要があります。また、HTMLファイル内には、quantityとsubtotalを含むID属性を持つ要素が必要です。これらのID属性には、それぞれの商品の番号を付ける必要があります。また、合計金額を表示する要素には、 total というID属性を付ける必要があります。

以下にHTMLファイルの例を示します。
この例では、3つの商品があり、それぞれの商品には数量と小計があります。また、合計金額も表示されます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Shopping Cart Example</title>
    <script src="path/to/your/javascript/file.js"></script>
</head>
<body>
    <h1>Shopping Cart</h1>
    <table>
        <thead>
            <tr>
                <th>Item</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Subtotal</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Item 1</td>
                <td>1000円</td>
                <td><input type="number" id="quantity1" value="0" onchange="updateSubtotal(1, 1000)"></td>
                <td id="subtotal1">0円</td>
            </tr>
            <tr>
                <td>Item 2</td>
                <td>2000円</td>
                <td><input type="number" id="quantity2" value="0" onchange="updateSubtotal(2, 2000)"></td>
                <td id="subtotal2">0円</td>
            </tr>
            <tr>
                <td>Item 3</td>
                <td>3000円</td>
                <td><input type="number" id="quantity3" value="0" onchange="updateSubtotal(3, 3000)"></td>
                <td id="subtotal3">0円</td>
            </tr>
            <tr>
                <td colspan="3">Total</td>
                <td id="total">0円</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

SQLの使いどころ

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

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

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

KK

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