javascriptの自動計算フォームを1つのHTML内に複数設置したい

こんにちは。JavaScript初心者すぎてどうして解決できず、質問させていただきましたm(__)m

前提・実現したいこと

一つのHTML内に、JavaScriptの自動計算フォームを設置したいのです。

発生している問題

いろいろなサイトの解説を参照しながら下記のようなJavaScriptを書きましたが、2つ目の計算フォームが動かずに困っています。
あまりにも初心者すぎるので、ひどいコードですみません・・・。

該当のソースコード

試したこと

「function ~」の名前を違うものにしたのですが、2つ目の計算フォームは全く動作しません。

素人の的を得ない質問で本当に申し訳ございません。
もし、お分かりになる方がいらっしゃいましたら、ご教授いただけるととても助かります。

よろしくお願いいたします。

yambejp

2021/07/19 07:34

質問欄に書くにはちょっと長めなのでどこか実行が見られるサイトにソースをアップしてもらえませんか？（せめてHTMLだけでもあれば） document.allなど非推奨表記もあるようですし、ifでつなぐのもかなり非効率にかんじます。

rio_344

2021/07/19 08:43

＞yambejp様ご返信いただき本当にありがとうございますm(__)m 要領を得ずご迷惑をおかけてすみません。。 HTMLを下記にアップいたしました。 http://ktkr2525.html.xdomain.jp/sitsumon.html どうぞよろしくお願いいたします。

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

回答2件

//sample.json

json
1[
2  {"h":60,"w":180,"p":10500},
3  {"h":60,"w":240,"p":12600},
4  {"h":60,"w":300,"p":15800},
5  {"h":60,"w":360,"p":19000},
6  {"h":60,"w":450,"p":23700},
7  {"h":60,"w":540,"p":28400},
8  {"h":60,"w":630,"p":33300},
9  {"h":60,"w":720,"p":38000},
10  {"h":90,"w":180,"p":13800},
11  {"h":90,"w":240,"p":16900},
12  {"h":90,"w":300,"p":21200},
13  {"h":90,"w":360,"p":23500},
14  {"h":90,"w":450,"p":29400},
15  {"h":90,"w":540,"p":35200},
16  {"h":90,"w":630,"p":41000},
17  {"h":90,"w":720,"p":46900},
18  {"h":120,"w":180,"p":16900},
19  {"h":120,"w":240,"p":20200},
20  {"h":120,"w":300,"p":23800},
21  {"h":120,"w":360,"p":25000},
22  {"h":120,"w":450,"p":30800},
23  {"h":120,"w":540,"p":36900},
24  {"h":120,"w":630,"p":42900},
25  {"h":120,"w":720,"p":47200},
26  {"h":150,"w":180,"p":19300},
27  {"h":150,"w":240,"p":24800},
28  {"h":150,"w":300,"p":28300},
29  {"h":150,"w":360,"p":23500},
30  {"h":150,"w":450,"p":32200},
31  {"h":150,"w":540,"p":47100},
32  {"h":150,"w":630,"p":52700},
33  {"h":150,"w":720,"p":60300},
34  {"h":180,"w":180,"p":20400},
35  {"h":180,"w":240,"p":31600},
36  {"h":180,"w":300,"p":34000},
37  {"h":180,"w":360,"p":37700},
38  {"h":180,"w":450,"p":46100},
39  {"h":180,"w":540,"p":53200},
40  {"h":180,"w":630,"p":61900},
41  {"h":180,"w":720,"p":70900},
42  {"h":240,"w":180,"p":27100},
43  {"h":240,"w":240,"p":42300},
44  {"h":240,"w":300,"p":43200},
45  {"h":240,"w":360,"p":50000},
46  {"h":240,"w":450,"p":59000},
47  {"h":240,"w":540,"p":70900},
48  {"h":240,"w":630,"p":82500},
49  {"h":240,"w":720,"p":94300}
50]
51

javascript
1<script>
2let hw=[];
3const calc=f=>{
4  const h=f.querySelector('[name=height]');
5  const w=f.querySelector('[name=width]');
6  const b=f.querySelector('[name=base]');
7  const k=f.querySelector('[name=kakou]');
8  const m=f.querySelector('[name=maisuu]');
9  const p=f.querySelector('[name=price]');
10  const t=f.querySelector('[name=total]');
11  let v=hw.filter(x=>x.h==h.value&&x.w==w.value)[0].p;
12  if(b.value=="3") v*=1.1;
13  p.value=v.toLocaleString();
14  t.value=(m.value*v).toLocaleString();
15};
16
17document.addEventListener('change',e=>{
18  if(e.target.closest('.trigger')){
19    calc(e.target.form);
20  }
21});
22window.addEventListener('DOMContentLoaded',async ()=>{
23  hw=await fetch("sample.json").then(res=>res.json());
24  document.querySelectorAll('form').forEach(calc);
25});
26</script>
27<form method="post">
28<table class="pdf">
29<tbody>
30<tr>
31<th>ご注文サイズ</th>
32<td>たて<select name="height" class="trigger">
33<option value="60">60cm</option>
34<option value="90">90cm</option>
35<option value="120">120cm</option>
36<option value="150">150cm</option>
37<option value="180">180cm</option>
38<option value="240">240cm</option>
39</select>　×　よこ<select  name="width" class="trigger">
40<option value="180">180cm</option>
41<option value="240">240cm</option>
42<option value="300">300cm</option>
43<option value="360">360cm</option>
44<option value="450">450cm</option>
45<option value="540">540cm</option>
46<option value="630">630cm</option>
47<option value="720">720cm</option>
48</select></td>
49</tr>
50<tr>
51<th>生地種類</th>
52<td><select  name="base" class="trigger">
53<option value="1">生地1</option>
54<option value="2">生地2</option>
55<option value="3">生地3</option>
56</select></td>
57</tr>
58<tr>
59<th>加工方法</th>
60<td><select  name="kakou" class="trigger">
61<option value="1">加工1</option>
62<option value="2">加工2</option>
63</select></td>
64</tr>
65<tr>
66<th>枚数</th>
67<td><select  name="maisuu" class="trigger">
68<option value="1">1</option>
69<option value="2">2</option>
70<option value="3">3</option>
71<option value="4">4</option>
72<option value="5">5</option>
73<option value="6">6</option>
74<option value="7">7</option>
75<option value="8">8</option>
76<option value="9">9</option>
77<option value="10">10</option>
78</select></td>
79</tr>
80<tr>
81  <th nowrap="nowrap">1枚当たり単価</th>
82  <td><textarea  cols="10" name="price" readonly></textarea>円</td>
83</tr>
84<tr>
85<th>合計金額</th>
86<td><textarea  cols="10" name="total" readonly></textarea>円</td>
87</tr>
88</tbody>
89</table>
90</form>
91<hr>
92<form method="post">
93<table class="pdf">
94<tbody>
95<tr>
96<th>ご注文サイズ</th>
97<td>たて<select name="height" class="trigger">
98<option value="60">60cm</option>
99<option value="90">90cm</option>
100<option value="120">120cm</option>
101<option value="150">150cm</option>
102<option value="180">180cm</option>
103<option value="240">240cm</option>
104</select>　×　よこ<select  name="width" class="trigger">
105<option value="180">180cm</option>
106<option value="240">240cm</option>
107<option value="300">300cm</option>
108<option value="360">360cm</option>
109<option value="450">450cm</option>
110<option value="540">540cm</option>
111<option value="630">630cm</option>
112<option value="720">720cm</option>
113</select></td>
114</tr>
115<tr>
116<th>生地種類</th>
117<td><select  name="base" class="trigger">
118<option value="1">生地1</option>
119<option value="2">生地2</option>
120<option value="3">生地3</option>
121</select></td>
122</tr>
123<tr>
124<th>加工方法</th>
125<td><select  name="kakou" class="trigger">
126<option value="1">加工1</option>
127<option value="2">加工2</option>
128</select></td>
129</tr>
130<tr>
131<th>枚数</th>
132<td><select  name="maisuu" class="trigger">
133<option value="1">1</option>
134<option value="2">2</option>
135<option value="3">3</option>
136<option value="4">4</option>
137<option value="5">5</option>
138<option value="6">6</option>
139<option value="7">7</option>
140<option value="8">8</option>
141<option value="9">9</option>
142<option value="10">10</option>
143</select></td>
144</tr>
145<tr>
146  <th nowrap="nowrap">1枚当たり単価</th>
147  <td><textarea  cols="10" name="price" readonly></textarea>円</td>
148</tr>
149<tr>
150<th>合計金額</th>
151<td><textarea  cols="10" name="total" readonly></textarea>円</td>
152</tr>
153</tbody>
154</table>
155</form>
156

投稿2021/07/19 09:33

yambejp

総合スコア116724

yambejp

2021/07/19 09:39

データは外出しにした方がメンテしやすいでしょう関数は再利用を前提に書いてください原則任意のidは同じページに複数箇所に設定することはできません

rio_344

2021/07/20 06:58

コードまで書いていただき、本当にありがとうございますm(__)m 美しいコードで感動いたしました。。データを外に出すほうがよいというのもその通りですよね。すごく勉強になります。ご教示いただいたコードを理解できるよう、もう少しがんばろうと思います！

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

ベストアンサー

htmlファイルを拝見していないので、何とも言えない状況ですが、
jsファイルのみ拝見する感じ、同一IDを使い回しているので、恐らく1つ目の計算フォームのみ動いていると思われます。
例えばCalculate_oneとCalculate_twoで
Calculate_oneは

javascript
1heightElement = document.getElementById("height01");

Calculate_twoは

javascript
1heightElement = document.getElementById("height02");

上記のように定義して一度動作するか確認してみてください。

投稿2021/07/19 07:43

jun26

総合スコア191

rio_344

2021/07/19 08:45

＞jun26様ご返信いただきありがとうございますm(__)m とりいそぎ、HTMLファイルを下記にアップいたしました。 http://ktkr2525.html.xdomain.jp/sitsumon.html ご教示いただいた方法で確認してみます。本当にありがとうございます。

jun26

2021/07/19 09:08

>rio_344さん頂いたHTMLファイルを基にこちらの環境で再現したところ、計算機1と2でheight～totalまでIDを書き分ければどちらも動作しました。お役に立てると幸いです。ご不明点ありましたらご質問ください。

rio_344

2021/07/20 06:53

ご検証までしていただき、本当にありがとうございますm(__)m 下記のようにoneを01、twoを02に書き換えたのですが、やはり動作せず・・・。他にも書き換えるべき箇所がありますでしょうか。。ド素人で的を得ておらず、本当に申し訳ございません。。。 -------------- heightElement = document.getElementById("height01"); widthElement = document.getElementById("width01"); baseElement = document.getElementById("base01"); kakouElement = document.getElementById("kakou01"); maisuuElement = document.getElementById("maisuu01"); priceElement = document.getElementById("price01"); totalElement = document.getElementById("total01"); ---------------

jun26

2021/07/20 08:41

現在のHTMLファイルを確認できていないため、回答が的外れでしたらすみません。変更後に、HTML側のIDもJS側で書き換えたIDと同じものにしていますでしょうか？

rio_344

2021/07/20 10:59

何度もお付き合いいただきありがとうございます。基本的なことをわかっていない初心者ですみません・・・。 HTMLのフォーム内のIDを書き換えたら動作いたしました！ http://ktkr2525.html.xdomain.jp/sitsumon.html このたびは本当にありがとうございました！！大変助かりましたm(__)m

jun26

2021/07/20 12:49

よかったです！基本は1つの動きにつき、1つのIDで実行するように気を付けるといいと思います。同一IDでjavascriptを実行した場合の参考を置いておきます！参考:https://step-learn.com/article/javascript/199-id-duplication.html

rio_344

2021/07/21 02:12

ありがとうございます！なるほど、だから一つ目だけが動作していたんですね。今回はすごく勉強になりました。本当に感謝ですm(__)m

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

あなたの回答