質問編集履歴

4

forEach文を取り消しinput idの重複を無くしました。

2020/10/12 11:40

投稿

ryo-0213
ryo-0213

スコア2

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  javascriptでリアルタイムの計算がしたい
4
4
 
5
- ![イメージ説明](19c53bd213306a576040ab54c988e263.png)
5
+ ![イメージ説明](e4c38b101278b30f20ac2c15395c4459.png)
6
6
 
7
7
  定価と掛け率を掛けた結果を単価のテキストボックスに表示させようとしています。
8
8
 
@@ -38,7 +38,7 @@
38
38
 
39
39
  <div id="content">
40
40
 
41
- <h2>職人Aの単価</h2>
41
+ <h2>の単価</h2>
42
42
 
43
43
 
44
44
 
@@ -64,7 +64,7 @@
64
64
 
65
65
  </tr>
66
66
 
67
-
67
+
68
68
 
69
69
  <tr>
70
70
 
@@ -88,267 +88,49 @@
88
88
 
89
89
  </tr>
90
90
 
91
-
92
91
 
93
- <tr>
94
-
95
- <td><input type="text" name="product_number"
96
-
97
- value=""></td>
98
-
99
- <td><input id="input01" type="text" name="normal_price"
100
-
101
- value="" /></td>
102
-
103
- <td><input id="input02" type="text" name="ratio"
104
-
105
- value=""></td>
106
-
107
- <td><input type="text" name="unit"
108
-
109
- value=""></td>
110
-
111
- <td><input id="answer" type="text" name="total" value=""></td>
112
-
113
- </tr>
114
-
115
-
116
-
117
- <tr>
118
-
119
- <td><input type="text" name="product_number"
120
-
121
- value=""></td>
122
-
123
- <td><input id="input01" type="text" name="normal_price"
124
-
125
- value="" /></td>
126
-
127
- <td><input id="input02" type="text" name="ratio"
128
-
129
- value=""></td>
130
-
131
- <td><input type="text" name="unit"
132
-
133
- value=""></td>
134
-
135
- <td><input id="answer" type="text" name="total" value=""></td>
136
-
137
- </tr>
138
-
139
-
140
-
141
- <tr>
142
-
143
- <td><input type="text" name="product_number"
144
-
145
- value=""></td>
146
-
147
- <td><input id="input01" type="text" name="normal_price"
148
-
149
- value="" /></td>
150
-
151
- <td><input id="input02" type="text" name="ratio"
152
-
153
- value=""></td>
154
-
155
- <td><input type="text" name="unit"
156
-
157
- value=""></td>
158
-
159
- <td><input id="answer" type="text" name="total" value=""></td>
160
-
161
- </tr>
162
-
163
-
164
-
165
- <tr>
166
-
167
- <td><input type="text" name="product_number"
168
-
169
- value=""></td>
170
-
171
- <td><input id="input01" type="text" name="normal_price"
172
-
173
- value="" /></td>
174
-
175
- <td><input id="input02" type="text" name="ratio"
176
-
177
- value=""></td>
178
-
179
- <td><input type="text" name="unit"
180
-
181
- value=""></td>
182
-
183
- <td><input id="answer" type="text" name="total" value=""></td>
184
-
185
- </tr>
186
-
187
-
188
-
189
- <tr>
190
-
191
- <td><input type="text" name="product_number"
192
-
193
- value=""></td>
194
-
195
- <td><input id="input01" type="text" name="normal_price"
196
-
197
- value="" /></td>
198
-
199
- <td><input id="input02" type="text" name="ratio"
200
-
201
- value=""></td>
202
-
203
- <td><input type="text" name="unit"
204
-
205
- value=""></td>
206
-
207
- <td><input id="answer" type="text" name="total" value=""></td>
208
-
209
- </tr>
210
-
211
-
212
-
213
- <tr>
214
-
215
- <td><input type="text" name="product_number"
216
-
217
- value=""></td>
218
-
219
- <td><input id="input01" type="text" name="normal_price"
220
-
221
- value="" /></td>
222
-
223
- <td><input id="input02" type="text" name="ratio"
224
-
225
- value=""></td>
226
-
227
- <td><input type="text" name="unit"
228
-
229
- value=""></td>
230
-
231
- <td><input id="answer" type="text" name="total" value=""></td>
232
-
233
- </tr>
234
-
235
-
236
-
237
- <tr>
238
-
239
- <td><input type="text" name="product_number"
240
-
241
- value=""></td>
242
-
243
- <td><input id="input01" type="text" name="normal_price"
244
-
245
- value="" /></td>
246
-
247
- <td><input id="input02" type="text" name="ratio"
248
-
249
- value=""></td>
250
-
251
- <td><input type="text" name="unit"
252
-
253
- value=""></td>
254
-
255
- <td><input id="answer" type="text" name="total" value=""></td>
256
-
257
- </tr>
258
-
259
-
260
-
261
- <tr>
262
-
263
- <td><input type="text" name="product_number"
264
-
265
- value=""></td>
266
-
267
- <td><input id="input01" type="text" name="normal_price"
268
-
269
- value="" /></td>
270
-
271
- <td><input id="input02" type="text" name="ratio"
272
-
273
- value=""></td>
274
-
275
- <td><input type="text" name="unit"
276
-
277
- value=""></td>
278
-
279
- <td><input id="answer" type="text" name="total" value=""></td>
280
-
281
- </tr>
282
-
283
-
284
-
285
- <tr>
286
-
287
- <td><input type="text" name="product_number"
288
-
289
- value=""></td>
290
-
291
- <td><input id="input01" type="text" name="normal_price"
292
-
293
- value="" /></td>
294
-
295
- <td><input id="input02" type="text" name="ratio"
296
-
297
- value=""></td>
298
-
299
- <td><input type="text" name="unit"
300
-
301
- value=""></td>
302
-
303
- <td><input id="answer" type="text" name="total" value=""></td>
304
-
305
- </tr>
306
-
307
-
308
92
 
309
93
  </tbody>
310
94
 
311
95
  </table>
312
96
 
313
- <input type="hidden" name="_token" value="0725E505EC2B326CB53970B7AE37733A" />
97
+ <input type="hidden" name="_token" value="7AB5160FBEC308661E3A883FBC032B4F" />
314
98
 
315
99
  <button type="submit">登録</button>
316
100
 
317
101
  </form>
318
102
 
319
- <script type = "text/javascript">
103
+ <script type="text/javascript">
104
+
105
+ window.onload = function() {
106
+
107
+ var input01 = document.getElementById("input01"); // DOM要素を用意しておく
108
+
109
+ var input02 = document.getElementById("input02"); // DOM要素を用意しておく
110
+
111
+ var answer = document.getElementById("answer"); // DOM要素を用意しておく
320
112
 
321
113
 
322
114
 
323
- window.onload = function() {
115
+ input01.value = ""; // 初期化
324
116
 
325
- var input01 = document.getElementById( "input01" ); // DOM要素を用意しておく
117
+ input02.value = ""; // 初期化
326
118
 
327
- var input02 = document.getElementById( "input02" ); // DOM要素を用意しておく
328
-
329
- var answer = document.getElementById( "answer" ); // DOM要素を用意しておく
119
+ answer.value = ""; // 初期化
330
120
 
331
121
 
332
122
 
333
- input01.value = ""; // 初期化
123
+ input02.onkeyup = function() { // キー入力が終わった瞬間に実行される関数の宣言
334
124
 
335
- input02.value = ""; // 初期化
125
+ answer.innerHTML = parseInt(input01.value, 10)
336
126
 
337
- answer.value = ""; // 初期化
127
+ * parseInt(input02.value, 10); // 実際の計算
338
128
 
129
+ };
339
130
 
131
+ }
340
132
 
341
- input02.onkeyup = function() { // キー入力が終わった瞬間に実行される関数の宣言
342
-
343
- answer.innerHTML = parseInt( input01.value, 10 ) * parseInt( input02.value, 10 ); // 実際の計算
344
-
345
- };
346
-
347
- }
348
-
349
-
350
-
351
- </script>
133
+ </script>
352
134
 
353
135
  </div>
354
136
 

3

質問内容の変更

2020/10/12 11:40

投稿

ryo-0213
ryo-0213

スコア2

test CHANGED
File without changes
test CHANGED
@@ -2,17 +2,13 @@
2
2
 
3
3
  javascriptでリアルタイムの計算がしたい
4
4
 
5
- ### 発生している問題・エラーメッセージ
6
-
7
- chromeを使っているのでコンソールなどで原因を調べたら Failed to load resource: the server responded with a status of 404 (Not Found)
8
-
9
- と表示されていましたが原因がわからないです。
10
-
11
- ![イメージ説明](42130dabe8f86fafd83e789dc6c501db.png)
5
+ ![イメージ説明](19c53bd213306a576040ab54c988e263.png)
6
+
7
+ 定価と掛け率を掛けた結果を単価のテキストボックスに表示させようとしています。
12
8
 
13
9
  ### 該当のソースコード
14
10
 
15
- ```jsp
11
+ ```HTML
16
12
 
17
13
  <!DOCTYPE html>
18
14
 

2

jspをそのまま載せてしまっていたのでhtmlに変更しました。

2020/10/12 06:26

投稿

ryo-0213
ryo-0213

スコア2

test CHANGED
File without changes
test CHANGED
@@ -14,134 +14,358 @@
14
14
 
15
15
  ```jsp
16
16
 
17
- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
18
-
19
- <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
20
-
21
- <c:import url="../layout/app.jsp">
17
+ <!DOCTYPE html>
22
-
18
+
23
- <c:param name="content">
19
+ <html lang="ja">
24
-
25
- <h2><c:out value="${sessionScope.orderer.company_name }" />の単価</h2>
20
+
26
-
27
- <c:if test="${errorsMap != null}">
28
-
29
- <div>
21
+ <head>
30
-
31
- <c:forEach items="${errorsMap}" var="errorsMap">
22
+
32
-
33
- ・<c:out value="${errorsMap.key + 1}" />行目の
34
-
35
- <c:forEach items="${errorsMap.value}" var="errors">
36
-
37
- <c:out value="${errors}" />
23
+ <meta charset="UTF-8">
24
+
38
-
25
+ <title>(アプリ名)</title>
26
+
27
+ <link rel="stylesheet" href="/distributor_system/css/reset.css">
28
+
29
+ <link rel="stylesheet" href="/distributor_system/css/style.css">
30
+
39
- </c:forEach>
31
+ </head>
32
+
40
-
33
+ <body>
34
+
35
+ <div id="wrapper">
36
+
41
- </c:forEach>
37
+ <div id="header">
38
+
39
+ <h1>(アプリ名)</h1>
42
40
 
43
41
  </div>
44
42
 
43
+ <div id="content">
44
+
45
+ <h2>職人Aの単価</h2>
46
+
47
+
48
+
49
+
50
+
51
+ <form method="POST" action="/distributor_system/wholesales/new">
52
+
53
+ <table>
54
+
55
+ <tbody>
56
+
57
+ <tr>
58
+
59
+ <th>品番</th>
60
+
61
+ <th>定価</th>
62
+
63
+ <th>掛け率</th>
64
+
65
+ <th>単位</th>
66
+
67
+ <th>単価</th>
68
+
69
+ </tr>
70
+
71
+
72
+
73
+ <tr>
74
+
75
+ <td><input type="text" name="product_number"
76
+
77
+ value=""></td>
78
+
79
+ <td><input id="input01" type="text" name="normal_price"
80
+
81
+ value="" /></td>
82
+
83
+ <td><input id="input02" type="text" name="ratio"
84
+
85
+ value=""></td>
86
+
87
+ <td><input type="text" name="unit"
88
+
89
+ value=""></td>
90
+
91
+ <td><input id="answer" type="text" name="total" value=""></td>
92
+
93
+ </tr>
94
+
95
+
96
+
97
+ <tr>
98
+
99
+ <td><input type="text" name="product_number"
100
+
101
+ value=""></td>
102
+
103
+ <td><input id="input01" type="text" name="normal_price"
104
+
105
+ value="" /></td>
106
+
107
+ <td><input id="input02" type="text" name="ratio"
108
+
109
+ value=""></td>
110
+
111
+ <td><input type="text" name="unit"
112
+
113
+ value=""></td>
114
+
115
+ <td><input id="answer" type="text" name="total" value=""></td>
116
+
117
+ </tr>
118
+
119
+
120
+
121
+ <tr>
122
+
123
+ <td><input type="text" name="product_number"
124
+
125
+ value=""></td>
126
+
127
+ <td><input id="input01" type="text" name="normal_price"
128
+
129
+ value="" /></td>
130
+
131
+ <td><input id="input02" type="text" name="ratio"
132
+
133
+ value=""></td>
134
+
135
+ <td><input type="text" name="unit"
136
+
137
+ value=""></td>
138
+
139
+ <td><input id="answer" type="text" name="total" value=""></td>
140
+
141
+ </tr>
142
+
143
+
144
+
145
+ <tr>
146
+
147
+ <td><input type="text" name="product_number"
148
+
149
+ value=""></td>
150
+
151
+ <td><input id="input01" type="text" name="normal_price"
152
+
153
+ value="" /></td>
154
+
155
+ <td><input id="input02" type="text" name="ratio"
156
+
157
+ value=""></td>
158
+
159
+ <td><input type="text" name="unit"
160
+
161
+ value=""></td>
162
+
163
+ <td><input id="answer" type="text" name="total" value=""></td>
164
+
165
+ </tr>
166
+
167
+
168
+
169
+ <tr>
170
+
171
+ <td><input type="text" name="product_number"
172
+
173
+ value=""></td>
174
+
175
+ <td><input id="input01" type="text" name="normal_price"
176
+
177
+ value="" /></td>
178
+
179
+ <td><input id="input02" type="text" name="ratio"
180
+
181
+ value=""></td>
182
+
183
+ <td><input type="text" name="unit"
184
+
185
+ value=""></td>
186
+
187
+ <td><input id="answer" type="text" name="total" value=""></td>
188
+
189
+ </tr>
190
+
191
+
192
+
193
+ <tr>
194
+
195
+ <td><input type="text" name="product_number"
196
+
197
+ value=""></td>
198
+
199
+ <td><input id="input01" type="text" name="normal_price"
200
+
201
+ value="" /></td>
202
+
203
+ <td><input id="input02" type="text" name="ratio"
204
+
205
+ value=""></td>
206
+
207
+ <td><input type="text" name="unit"
208
+
209
+ value=""></td>
210
+
211
+ <td><input id="answer" type="text" name="total" value=""></td>
212
+
213
+ </tr>
214
+
215
+
216
+
217
+ <tr>
218
+
219
+ <td><input type="text" name="product_number"
220
+
221
+ value=""></td>
222
+
223
+ <td><input id="input01" type="text" name="normal_price"
224
+
225
+ value="" /></td>
226
+
227
+ <td><input id="input02" type="text" name="ratio"
228
+
229
+ value=""></td>
230
+
231
+ <td><input type="text" name="unit"
232
+
233
+ value=""></td>
234
+
235
+ <td><input id="answer" type="text" name="total" value=""></td>
236
+
237
+ </tr>
238
+
239
+
240
+
241
+ <tr>
242
+
243
+ <td><input type="text" name="product_number"
244
+
245
+ value=""></td>
246
+
247
+ <td><input id="input01" type="text" name="normal_price"
248
+
249
+ value="" /></td>
250
+
251
+ <td><input id="input02" type="text" name="ratio"
252
+
253
+ value=""></td>
254
+
255
+ <td><input type="text" name="unit"
256
+
257
+ value=""></td>
258
+
259
+ <td><input id="answer" type="text" name="total" value=""></td>
260
+
261
+ </tr>
262
+
263
+
264
+
265
+ <tr>
266
+
267
+ <td><input type="text" name="product_number"
268
+
269
+ value=""></td>
270
+
271
+ <td><input id="input01" type="text" name="normal_price"
272
+
273
+ value="" /></td>
274
+
275
+ <td><input id="input02" type="text" name="ratio"
276
+
277
+ value=""></td>
278
+
279
+ <td><input type="text" name="unit"
280
+
281
+ value=""></td>
282
+
283
+ <td><input id="answer" type="text" name="total" value=""></td>
284
+
285
+ </tr>
286
+
287
+
288
+
289
+ <tr>
290
+
291
+ <td><input type="text" name="product_number"
292
+
293
+ value=""></td>
294
+
295
+ <td><input id="input01" type="text" name="normal_price"
296
+
297
+ value="" /></td>
298
+
299
+ <td><input id="input02" type="text" name="ratio"
300
+
301
+ value=""></td>
302
+
303
+ <td><input type="text" name="unit"
304
+
305
+ value=""></td>
306
+
307
+ <td><input id="answer" type="text" name="total" value=""></td>
308
+
309
+ </tr>
310
+
311
+
312
+
313
+ </tbody>
314
+
315
+ </table>
316
+
317
+ <input type="hidden" name="_token" value="0725E505EC2B326CB53970B7AE37733A" />
318
+
319
+ <button type="submit">登録</button>
320
+
321
+ </form>
322
+
323
+ <script type = "text/javascript">
324
+
325
+
326
+
327
+ window.onload = function() {
328
+
329
+ var input01 = document.getElementById( "input01" ); // DOM要素を用意しておく
330
+
331
+ var input02 = document.getElementById( "input02" ); // DOM要素を用意しておく
332
+
333
+ var answer = document.getElementById( "answer" ); // DOM要素を用意しておく
334
+
335
+
336
+
337
+ input01.value = ""; // 初期化
338
+
339
+ input02.value = ""; // 初期化
340
+
341
+ answer.value = ""; // 初期化
342
+
343
+
344
+
345
+ input02.onkeyup = function() { // キー入力が終わった瞬間に実行される関数の宣言
346
+
347
+ answer.innerHTML = parseInt( input01.value, 10 ) * parseInt( input02.value, 10 ); // 実際の計算
348
+
349
+ };
350
+
351
+ }
352
+
353
+
354
+
45
- </c:if>
355
+ </script>
46
-
47
- <c:if test="${errors != null }">
48
-
49
- <div>
50
-
51
- ・<c:out value="${errors}" />
52
356
 
53
357
  </div>
54
358
 
359
+ <div id="footer">
360
+
361
+ by Ryo Shimoda.
362
+
55
- </c:if>
363
+ </div>
56
-
57
- <form method="POST" action="<c:url value='/wholesales/new' />">
364
+
58
-
59
- <table>
60
-
61
- <tbody>
62
-
63
- <tr>
64
-
65
- <th>品番</th>
66
-
67
- <th>定価</th>
68
-
69
- <th>掛け率</th>
70
-
71
- <th>単位</th>
72
-
73
- <th>単価</th>
74
-
75
- </tr>
365
+ </div>
76
-
77
- <c:forEach var="i" begin="0" end="9">
366
+
78
-
79
- <tr>
80
-
81
- <td><input type="text" name="product_number"
82
-
83
- value="<c:out value='${numberList[i] }' />"></td>
84
-
85
- <td><input id="input01" type="text" name="normal_price"
86
-
87
- value="<c:out value='${priceList[i] }' />" /></td>
88
-
89
- <td><input id="input02" type="text" name="ratio"
90
-
91
- value="<c:out value='${ratioList[i] }' />"></td>
92
-
93
- <td><input type="text" name="unit"
94
-
95
- value="<c:out value='${unitList[i] }' />"></td>
96
-
97
- <td><input id="answer" type="text" name="total" value=""></td>
98
-
99
- </tr>
100
-
101
- </c:forEach>
102
-
103
- </tbody>
367
+ </body>
104
-
368
+
105
- </table>
369
+ </html>
106
-
107
- <input type="hidden" name="_token" value="${_token }" />
108
-
109
- <button type="submit">登録</button>
110
-
111
- </form>
112
-
113
- <script type="text/javascript">
114
-
115
- window.onload = function() {
116
-
117
- var input01 = document.getElementById("input01"); // DOM要素を用意しておく
118
-
119
- var input02 = document.getElementById("input02"); // DOM要素を用意しておく
120
-
121
- var answer = document.getElementById("answer"); // DOM要素を用意しておく
122
-
123
-
124
-
125
- input01.value = ""; // 初期化
126
-
127
- input02.value = ""; // 初期化
128
-
129
- answer.value = ""; // 初期化
130
-
131
-
132
-
133
- input02.onkeyup = function() { // キー入力が終わった瞬間に実行される関数の宣言
134
-
135
- answer.innerHTML = parseInt(input01.value, 10) * parseInt(input02.value, 10); // 実際の計算
136
-
137
- };
138
-
139
- }
140
-
141
- </script>
142
-
143
- </c:param>
144
-
145
- </c:import>
146
370
 
147
371
  ```

1

エラー画面のスクショを追加しました。

2020/10/12 05:49

投稿

ryo-0213
ryo-0213

スコア2

test CHANGED
File without changes
test CHANGED
@@ -7,6 +7,8 @@
7
7
  chromeを使っているのでコンソールなどで原因を調べたら Failed to load resource: the server responded with a status of 404 (Not Found)
8
8
 
9
9
  と表示されていましたが原因がわからないです。
10
+
11
+ ![イメージ説明](42130dabe8f86fafd83e789dc6c501db.png)
10
12
 
11
13
  ### 該当のソースコード
12
14