質問編集履歴

3

回答を受けて現時点の結果を貼り付けました

2021/06/30 13:08

投稿

shiuri
shiuri

スコア2

test CHANGED
File without changes
test CHANGED
@@ -309,3 +309,57 @@
309
309
 
310
310
 
311
311
  ```
312
+
313
+ ### **さらに追記 2つめの回答を受けて**
314
+
315
+ 素人考えでいじった結果となります。
316
+
317
+ お手数おかけしますがよろしくお願いいたします。
318
+
319
+ ```ここに言語を入力
320
+
321
+ $(document).ready(function(){
322
+
323
+ $('select').change(function() {
324
+
325
+
326
+
327
+ // 金額入力欄をquerySelectorAllでまとめて取ってくる
328
+
329
+
330
+
331
+ let priceList = document.querySelectorAll('.price');
332
+
333
+ priceList.forEach( e => {
334
+
335
+ // 各金額入力欄の対し、予めセットしている小計対象のname値を取得
336
+
337
+ let targetSyoukeiClass = e.dataset.syoukei;
338
+
339
+ // querySelectorで小計を加算するinputを特定
340
+
341
+ let targetSyoukeiInput = document.querySelector(`input[name=${targetSyoukeiClass}]`);
342
+
343
+ // 無事取得できたら、小計inputに金額を加算する
344
+
345
+
346
+
347
+ targetSyoukeiInput.value = 0;
348
+
349
+
350
+
351
+ if(targetSyoukeiInput){
352
+
353
+ targetSyoukeiInput.value = Number(targetSyoukeiInput.value) + Number(e.value);
354
+
355
+ }
356
+
357
+ });
358
+
359
+ });
360
+
361
+ });
362
+
363
+ コード
364
+
365
+ ```

2

ご指摘を受けて改めてScriptを貼り付けしました。

2021/06/30 13:08

投稿

shiuri
shiuri

スコア2

test CHANGED
File without changes
test CHANGED
@@ -269,3 +269,43 @@
269
269
 
270
270
 
271
271
  ```
272
+
273
+
274
+
275
+ ### **さらに追記 ご指摘を受けて**
276
+
277
+ ご指摘を受け変更したのですが、上手く動きませんでした。(合計値が出されなかった)
278
+
279
+ どこにミスがあるかご教示いただけますと幸いです。
280
+
281
+ ```Javascript
282
+
283
+ $(document).ready(function(){
284
+
285
+ $('select').change(function() {
286
+
287
+ var syoukei= document.querySelectorAll('[name^="syoukei"]');
288
+
289
+ for( i = 0; i < syoukei.length; i++ ) {
290
+
291
+ syoukei[ i ]=0;
292
+
293
+ $(".value"+i+" input:text").each(function(){
294
+
295
+ var value[ i ] = $(this).val();
296
+
297
+ syoukei[ i ] = parseInt(value[ i ])+syoukei[ i ];
298
+
299
+ });
300
+
301
+ document.form.syoukei[ i ].value = syoukei[ i ]; // 合計を表示
302
+
303
+ });
304
+
305
+ });
306
+
307
+ });
308
+
309
+
310
+
311
+ ```

1

上手くいかない部分やHTMLの追記をいたしました。

2021/06/29 12:39

投稿

shiuri
shiuri

スコア2

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  javascriptで計算フォームを作成しております。
2
2
 
3
- 複数あるvalueの合計がsyoukeiに出るようにしています。
3
+ 複数あるvalue(品物単価)の合計がsyoukeiに出るようにしています。
4
4
 
5
5
  forでまとめたいのですが、上手くいきません。
6
6
 
@@ -8,6 +8,10 @@
8
8
 
9
9
 
10
10
 
11
+ 追記 下記のjavascriptは綺麗に動いた例ですが、品物が増えるとその分追記しなくてはならないため、纏められないかと思いご質問させていただきました。
12
+
13
+
14
+
11
15
  ```javascript
12
16
 
13
17
  $(document).ready(function(){
@@ -81,3 +85,187 @@
81
85
  });
82
86
 
83
87
  ```
88
+
89
+ HTMLも追記いたします。
90
+
91
+ 他のscriptもありclassが乱立していますが、今回の質問では商品1~3横のinputに各商品の小計を入れることだけを目的としているためほかのscrptは記載はしておりません。必要であれば記載させていただきます。
92
+
93
+ ```HTML
94
+
95
+ <form method="post" name="form">
96
+
97
+ <table border="1">
98
+
99
+ <tr>
100
+
101
+ <th>詳細</th>
102
+
103
+ <th>単価</th>
104
+
105
+ <th>数量</th>
106
+
107
+ <th>金額</th>
108
+
109
+ </tr>
110
+
111
+
112
+
113
+ <tr class="title"><td colspan="4">商品1<input type="text" name="syoukei0" class="syoukeis" value="0" disabled></td></tr>
114
+
115
+ <tr class="rows">
116
+
117
+ <td></td>
118
+
119
+ <td class="tanka" >440円</td>
120
+
121
+ <td><select name="goods1">
122
+
123
+ <option value="0" selected>0</option>
124
+
125
+ <option value="1">1</option>
126
+
127
+ </select></td>
128
+
129
+ <td class="value0"><input type="text" class="price" size="7" value="0"> 円</td>
130
+
131
+ </tr>
132
+
133
+ <tr class="title"><td colspan="4">商品2<input type="text" name="syoukei1" class="syoukeis" value="0" disabled></td></tr>
134
+
135
+ <tr class="rows">
136
+
137
+ <td></td>
138
+
139
+ <td class="tanka" >440円</td>
140
+
141
+ <td><select name="goods2">
142
+
143
+ <option value="0" selected>0</option>
144
+
145
+ <option value="1">1</option>
146
+
147
+ </select></td>
148
+
149
+ <td class="value1"><input type="text" class="price" size="7" value="0"> 円</td>
150
+
151
+ </tr>
152
+
153
+
154
+
155
+ <tr class="title"><td colspan="4">商品3<input type="text" name="syoukei2" class="syoukeis" value="0" disabled></td></tr>
156
+
157
+ <tr class="rows">
158
+
159
+ <td><font color="red">キャラ1</font></td>
160
+
161
+ <td class="tanka">605円</td>
162
+
163
+ <td ><select name="goods3">
164
+
165
+ <option value="0" selected>0</option>
166
+
167
+ <option value="1">1</option>
168
+
169
+ </select></td>
170
+
171
+ <td class="value2"><input type="text" class="price" size="7" value="0"> 円</td>
172
+
173
+ </tr>
174
+
175
+ <tr class="rows">
176
+
177
+ <td><font color="blue">キャラ2</font></td>
178
+
179
+ <td class="tanka" >605円</td>
180
+
181
+ <td ><select name="goods4">
182
+
183
+ <option value="0" selected>0</option>
184
+
185
+ <option value="1">1</option>
186
+
187
+ </select></td>
188
+
189
+ <td class="value2"><input type="text" class="price" size="7" value="0"> 円</td>
190
+
191
+ </tr>
192
+
193
+ <tr class="rows">
194
+
195
+ <td><font color="yellow">キャラ3</font></td>
196
+
197
+ <td class="tanka" >605円</td>
198
+
199
+ <td ><select name="goods5">
200
+
201
+ <option value="0" selected>0</option>
202
+
203
+ <option value="1">1</option>
204
+
205
+ </select></td>
206
+
207
+ <td class="value2"><input type="text" class="price" size="7" value="0"> 円</td>
208
+
209
+ </tr>
210
+
211
+ <a name="top"></a>
212
+
213
+ <tr >
214
+
215
+ <td colspan="3" >
216
+
217
+ <button type="button" id="hide">0円を非表示</button>  合計</td>
218
+
219
+ <td><a name="top"></a><input type="text" id="total" size="7" value="0"> 円</td>
220
+
221
+ </tr>
222
+
223
+ <tr>
224
+
225
+ <td colspan="3" >特典</td>
226
+
227
+ <td><input type="text" id="tokuten" size="7" value="0"> 枚</td>
228
+
229
+ </tr>
230
+
231
+ </table>
232
+
233
+ ```
234
+
235
+
236
+
237
+ ### **追記 試したこと**
238
+
239
+ 見よう見まねでやろうとしましたが、上手く動かなかったのでご質問した次第でございます。
240
+
241
+ ```
242
+
243
+ $(document).ready(function(){
244
+
245
+ $('select').change(function() {
246
+
247
+ var syoukei= document.getElementsByName('[name^="syoukei"]').value;
248
+
249
+ for( i = 0; i < syoukei.length; i++ ) {
250
+
251
+ syoukei[ i ]=0;
252
+
253
+ $(".value[ i ] input:text").each(function(){
254
+
255
+ var value[ i ] = $(this).val();
256
+
257
+ syoukei[ i ] = parseInt(value[ i ])+syoukei[ i ];
258
+
259
+ });
260
+
261
+ document.form.syoukei[ i ].value = syoukei[ i ]; // 合計を表示
262
+
263
+ });
264
+
265
+ });
266
+
267
+ });
268
+
269
+
270
+
271
+ ```