jqueryで合計料金をリアルタイムで表示する方法

前提

jqueryで合計料金をリアルタイムで表示するサイトを作っています。

実現したいこと

合計料金を表示したいです。

発生している問題・エラーメッセージ

セレクトボックスの変化で反応するようにしているため、選択する前はFirvalueが存在しないと出ています。

該当のソースコード

javascript
1$(function() {
2    Firvalue1 = 5000;
3    Firvalue2 = 0;
4    Firvalue3 = 0;
5
6    macivalue1 = 0;
7    macivalue2 = 0;
8
9    usevalue1 = 0;
10    usevalue2 = 0;
11
12    function value() {
13    Firvalue = Firvalue1 + Firvalue2 + Firvalue3;
14    $("#init_base_total").append(Firvalue);
15    macivalue = macivalue1 + macivalue2;
16    $("#init_iptel_total").append(macivalue);
17    usevalue = usevalue1 + usevalue2;
18    $("#month_rental_total").append(usevalue);
19    }
20
21    $("#group3_type1").change(function(){
22        let str1 = $("#group3_type1").val();
23        let Firvalue1 = str1 * 5000;
24        value(Firvalue1);
25    });
26
27    $("#group3_type2").change(function() {
28        let str2 = $("#group3_type2").val();
29        let Firvalue2 = str2 * 5000;
30        let macivalue1 = str2 * 11500;
31        let usevalue1 = str2 * 500;
32        value(Firvalue2, macivalue1, usevalue1);
33    });
34
35    $("#group3_type3").change(function(){
36        let str3 = $("#group3_type3").val();
37        let Firvalue3 = str3 * 5000;
38        let macivalue2 = str3 * 9300;
39        let usevalue2 = str3 * 500;
40        value(Firvalue3, macivalue2, usevalue2);
41    });
42});

PHP
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<link rel="stylesheet" type="text/css" href="CSS/style.css?<?php echo date('Ymd-Hi');?>">
6<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
7</head>
8<body>
9<select id="group3_type1" style="font-size: 0.9em; float:left; margin-left:30px">
10                            <option value="0">0</option>
11                            <option value="1" selected>1</option>
12                            <option value="2">2</option>
13                            <option value="3">3</option>
14                            <option value="4">4</option>
15                            <option value="5">5</option>
16                            <option value="6">6</option>
17                            <option value="7">7</option>
18                            <option value="8">8</option>
19                            <option value="9">9</option>
20                            <option value="10">10</option>
21                            <option value="11">11</option>
22                            <option value="12">12</option>
23                            <option value="13">13</option>
24                            <option value="14">14</option>
25                            <option value="15">15</option>
26                            <option value="16">16</option>
27                            <option value="17">17</option>
28                            <option value="18">18</option>
29                            <option value="19">19</option>
30                            <option value="20">20</option>
31                        </select>
32<select id="group3_type2" style="font-size: 0.9em; float:left; margin-left:30px">
33                            <option value="0" selected>0</option>
34                            <option value="1">1</option>
35                            <option value="2">2</option>
36                            <option value="3">3</option>
37                            <option value="4">4</option>
38                            <option value="5">5</option>
39                            <option value="6">6</option>
40                            <option value="7">7</option>
41                            <option value="8">8</option>
42                            <option value="9">9</option>
43                            <option value="10">10</option>
44                        </select>
45<select id="group3_type3" style="font-size: 0.9em; float:left; margin-left:30px">
46                            <option value="0" selected>0</option>
47                            <option value="1">1</option>
48                            <option value="2">2</option>
49                            <option value="3">3</option>
50                            <option value="4">4</option>
51                            <option value="5">5</option>
52                            <option value="6">6</option>
53                            <option value="7">7</option>
54                            <option value="8">8</option>
55                            <option value="9">9</option>
56                            <option value="10">10</option>
57                        </select>
58　　　　　　　　　<td class="left"></td>
59                                <td class="right" id="init_base_total"></td>
60                            </tr>
61                            <tr>
62                                <td class="left"></td>
63                                <td class="right" id="init_iptel_total">
64                                </td>
65                            </tr>
66　　　　　　　　　<tr>
67                                <td class="left"></td>
68                                <td class="right" id="month_rental_total">
69                                </td>
70                            </tr>
71
72</body>
73</html>
74

試したこと

一度他の関数内で定義した関数は使えないとのことだったので、数字を後ろにつけて区別するようにしました。

補足情報（FW/ツールのバージョンなど）

できるだけHTMLには触れずにjavascriptの変更だけで実現したいです。
Firvalue1などに初期値が存在しないのがいけないのでしょうか。
それとも関数の外だから参照できていないのでしょうか。

行動規範の内容に同意します

回答2件

こんな感じになるかなーというものをざっくり作ってみました。この作り方がベストとは思いませんので、あくまで一例として参考にしていただければと思います。

javascript
1$(function() {
2
3  const config = {
4    firValues: { unitPrices: [5000, 5000, 5000], totalId: '#init_base_total' },
5    maciValues: { unitPrices: [0, 11500, 9300], totalId: '#init_iptel_total' },
6    useValues: { unitPrices: [0, 500, 500], totalId: '#month_rental_total' }
7  }
8
9  const sum = values => values.reduce((total, value) => total + value, 0);
10
11  const updateGrandTotals = () => {
12    Object.entries(config).forEach(([key, { totalId }]) => {
13      $(totalId).text(sum($.subTotals[key]).toLocaleString());
14    });
15  }
16
17
18  (function initialize() {
19    $.subTotals = {};
20    const amounts = $('select').map(function () { return +$(this).val(); }).get();
21    Object.entries(config).forEach(([key, { unitPrices }]) => {
22      $.subTotals[key] = amounts.map((amount, index) => amount * unitPrices[index]);
23    });
24    updateGrandTotals();
25  })();
26
27
28  $('select').on('change', function() {
29    const [amount, index] = [+$(this).val(), +$(this).attr('id').at(-1) - 1];
30    Object.entries(config).forEach(([key, { unitPrices }]) => {
31      $.subTotals[key][index] = amount * unitPrices[index];
32    });
33    updateGrandTotals();
34  });
35
36});
37

動作確認用サンプル 👉 https://codepen.io/su507/pen/xxjjVjM?editors=0010

追記

さら整理していくとこのようなものになります 👉 https://codepen.io/su507/pen/GRddjyP?editors=0010

投稿2022/10/01 13:20

編集2022/10/01 16:04

退会済みユーザー

総合スコア0

aoihello

2022/10/01 14:23

su507様動作確認用サンプルなど、丁寧にご回答いただき誠にありがとうございます。まだまだ、このプログラムを完全に理解し、次回再現できるように、一個一個解読し是非参考にさせていただきたいと存じます。今後ともよろしくお願いいたします。

aoihello

2022/10/02 03:27

su507様、整理した形でのプログラム拝見させていただきました。ご丁寧にご回答いただき誠にありがとうございます。私の認識が正しければ、こちらのプログラムはjquery無しのjavascriptで書かれたプログラムだと認識しました。私の説明不足でしたが、本日はjqueryでの実装を考えておりましたので、jqueryでまた、今私が書いていたプログラムを修正する形で実装させていただいた、m.ts10806様をベストアンサーとさせていただいた所存です。今後とも、よろしくお願いいたします。

行動規範の内容に同意します

ベストアンサー

Firvalue1などに初期値が存在しないのがいけないのでしょうか。

はい

それとも関数の外だから参照できていないのでしょうか。

いいえ。
イベントが発生しない限り定義されない変数をいきなり使っていることが原因です。

計算処理はイベント無関係に通ります。

改修方針としては下記。

利用する変数に全てグローバルで初期値を設定する（varではなくletで定義すべき）

2.計算処理を関数化し、適宜呼び出す

投稿2022/10/01 11:19

m.ts10806

総合スコア80850

aoihello

2022/10/01 12:35

m.ts10806様、ご回答誠にありがとうございます。初期値をグローバル変数で定義し、計算処理を関数化し適宜呼び出すように下記のように書き換えました。 $(function() { Firvalue1 = 5000; Firvalue2 = 0; Firvalue3 = 0; macivalue1 = 0; macivalue2 = 0; usevalue1 = 0; usevalue2 = 0; function value() { Firvalue = Firvalue1 + Firvalue2 + Firvalue3; $("#init_base_total").append(Firvalue); macivalue = macivalue1 + macivalue2; $("#init_iptel_total").append(macivalue); usevalue = usevalue1 + usevalue2; $("#month_rental_total").append(usevalue); } $("#group3_type1").change(function(){ let str1 = $("#group3_type1").val(); let Firvalue1 = str1 * 5000; value(Firvalue1); }); $("#group3_type2").change(function() { let str2 = $("#group3_type2").val(); let Firvalue2 = str2 * 5000; let macivalue1 = str2 * 11500; let usevalue1 = str2 * 500; value(Firvalue2, macivalue1, usevalue1); }); $("#group3_type3").change(function(){ let str3 = $("#group3_type3").val(); let Firvalue3 = str3 * 5000; let macivalue2 = str3 * 9300; let usevalue2 = str3 * 500; value(Firvalue3, macivalue2, usevalue2); }); }); 初期値としてFirvalueに5000を入れているのですが、初めは出力されず、selectでどのような値が入力されても、Firvalueに0、macivalueとusevalueに0が代入されます。引数に書いてみたりしたのですが、参照されていません。質問のプログラムも書き換えます。

aoihello

2022/10/01 12:39

1個目のchangeの方ではFirvalue以外使わないので、Firvalueだけのものと、macivalueとusevalueの関数で分けて定義して、実行もしてみたのですが、同じ結果でした。

m.ts10806

2022/10/01 21:43 編集

グローバルになっていません（$(function() {の中にあるから） let で定義がイベント内だから変数のスコープがその中だけになってます。関数の作り方と呼び出し方ができてません（引数を理解している？）

aoihello

2022/10/02 03:21

m.ts10806様ご回答誠にありがとうございます。グローバル変数と関数の呼び出し方について再度調べ下記のように書き換えたところ、適切に出力されるようになりました。 <script type="text/javascript"> var Firvalue1 = 5000; var Firvalue2 = 0; var Firvalue3 = 0; var macivalue1 = 0; var macivalue2 = 0; var usevalue1 = 0; var usevalue2 = 0; $(function() { function value(Firvalue1, Firvalue2, Firvalue3, macivalue1, macivalue2, usevalue1, usevalue2) { Firvalue = Firvalue1 + Firvalue2 + Firvalue3; $("#init_base_total").html(Firvalue + "円"); macivalue = macivalue1 + macivalue2; $("#init_iptel_total").html(macivalue + "円"); usevalue = usevalue1 + usevalue2; $("#month_rental_total").html(usevalue + "円"); } $("#group3_type1, #group3_type2, #group3_type3").change(function(){ var str1 = $("#group3_type1").val(); var Firvalue1 = str1 * 5000; var str2 = $("#group3_type2").val(); var Firvalue2 = str2 * 5000; var macivalue1 = str2 * 11500; var usevalue1 = str2 * 500; var str3 = $("#group3_type3").val(); var Firvalue3 = str3 * 5000; var macivalue2 = str3 * 9300; var usevalue2 = str3 * 500; value(Firvalue1, Firvalue2, Firvalue3, macivalue1, macivalue2, usevalue1, usevalue2); }); }); 誠にありがとうございます。

m.ts10806

2022/10/02 03:25

もうちょっと基礎を。グローバルに宣言したなら引数不要です。

m.ts10806

2022/10/02 03:26

$(function() { がなんの役割かすらも理解されてないように見受けられます。それではかなり厳しいです。

aoihello

2022/10/02 03:29

おっしゃる通りです。 $(function() {と　function()の違いが分からずご回答いただいた方にメッセージ後勉強しようと存じておりました。

行動規範の内容に同意します

あなたの回答