記入日: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化のディレクションなどを行っています。