記入日: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の部分では、次のような処理が行われています。
SQLの使いどころ
サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。
SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。
また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。
KK
機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。