teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問書籍の購入ページの会計が上手くできません。JavaScript初心者です。

編集履歴

質問編集履歴

2

ご指摘ありがとうございます。こちらで全てです。

2017/07/03 13:42

投稿

MTT
MTT

スコア9

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  JavaScript初心者です。学校の課題で書籍の購入サイトを作成しています。
4
4
 
5
- 「書籍登録ページ」にて書籍のid,タイトル,著者,出版社,値段を入力したら、「書籍購入ページ」にて入力した書籍のid～値段の情報が表示されるようになっています。同ページの一番下に商品のidを入力するフォームがあり、希望の商品のidを入力して「購入」ボタンを押し、希望の商品を購入し終えたタイミングで購入ボタンの下の「会計」ボタンを押すことで購入した商品の総額が表示されるようになっています。
5
+ 「書籍登録ページ」にて書籍のid,タイトル,著者,出版社,値段,画像のURLを入力したら、「書籍購入ページ」にて入力した書籍のid～値段の情報、そして画像が表示されるようになっています。同ページの一番下に商品のidを入力するフォームがあり、希望の商品のidを入力して「購入」ボタンを押し、希望の商品を購入し終えたタイミングで購入ボタンの下の「会計」ボタンを押すことで購入した商品の総額が表示されるようになっています。
6
6
 
7
7
  実装中に以下のエラーメッセージが発生しました。
8
8
 
@@ -42,7 +42,9 @@
42
42
 
43
43
  ```
44
44
 
45
- 登録ページのソースコードの一部(JavaScript)
45
+ 登録ページのソースコード(JavaScript)
46
+
47
+
46
48
 
47
49
  document.addEventListener("DOMContentLoaded", () => {
48
50
 
@@ -58,6 +60,8 @@
58
60
 
59
61
  let price = Number($("input_price").value);
60
62
 
63
+ let image = $("input_image").value;
64
+
61
65
 
62
66
 
63
67
  let json = getJSON("json_key");
@@ -68,9 +72,21 @@
68
72
 
69
73
  }
70
74
 
71
- json[id] = {"title": title, "author": author, "publish": publish, "price": price};
75
+ json[id] = {"title": title, "author": author, "publish": publish, "price": price, "image": image };
76
+
72
-
77
+ // idをキーとしてjson形式で書籍情報を保存
78
+
73
-
79
+ console.log(JSON.stringify(json));
80
+
81
+ setJSON("json_key", json);
82
+
83
+ });
84
+
85
+ });
86
+
87
+ ```
88
+
89
+ ```
74
90
 
75
91
  (HTML)
76
92
 
@@ -86,9 +102,9 @@
86
102
 
87
103
  <script src="js/com_ex.js"></script>
88
104
 
89
- <script src="js/ex_entry.js"></script>
105
+ <script src="js/ex5_entry.js"></script>
90
-
106
+
91
- <title>書籍登録ページ</title>
107
+ <title>演習問題５：書籍登録ページ</title>
92
108
 
93
109
  </head>
94
110
 
@@ -96,7 +112,7 @@
96
112
 
97
113
  <body>
98
114
 
99
- <h1>書籍登録ページ</h1>
115
+ <h1>演習問題５：書籍登録ページ</h1>
100
116
 
101
117
  <form>
102
118
 
@@ -110,23 +126,27 @@
110
126
 
111
127
  価格: <input type="text" id="input_price" /><br>
112
128
 
129
+ 画像: <input type="text" id="input_image" /><br>
130
+
113
131
 
114
132
 
115
133
  <button type="button" id="set_btn">保存</button>
116
134
 
117
- </form>
135
+ </form>
118
-
119
-
120
136
 
121
137
  </body>
122
138
 
123
139
  </html>
124
140
 
125
-
141
+ ```
142
+
126
-
143
+ ```
144
+
127
- 一覧ページのソースコードの一部(JavaScript)
145
+ 書籍一覧ページ(JavaScript)
146
+
128
-
147
+ document.addEventListener("DOMContentLoaded", () => {
148
+
129
- let json = getJSON("json_key");
149
+ let json = getJSON("json_key");
130
150
 
131
151
  for (let key in json) {
132
152
 
@@ -138,6 +158,8 @@
138
158
 
139
159
  let price = json[key].price;
140
160
 
161
+ let image = json[key].image;
162
+
141
163
 
142
164
 
143
165
  $("output_books").innerHTML += `
@@ -150,7 +172,9 @@
150
172
 
151
173
  出版社名： ${publish}<br>
152
174
 
153
- 価格： ${price}<br><br>
175
+ 価格： ${price}<br>
176
+
177
+ <img src="${image}"></img><br><br>
154
178
 
155
179
  <br>
156
180
 
@@ -178,11 +202,23 @@
178
202
 
179
203
  checkBookIdList.push(id);
180
204
 
205
+ // idをcheckBookIdListに追加
206
+
181
207
  console.log(checkBookIdList);
182
208
 
183
- setJSON("book_id_list" , checkBookIdList);
209
+ setJSON("book_id_list" , checkBookIdList);
210
+
184
-
211
+ // localStorageにcheckBookIdListを保存
212
+
185
-
213
+ });
214
+
215
+ });
216
+
217
+
218
+
219
+ ```
220
+
221
+ ```
186
222
 
187
223
  (HTML)
188
224
 
@@ -200,9 +236,9 @@
200
236
 
201
237
  <script src="js/com_ex.js"></script>
202
238
 
203
- <script src="js/ex_index.js"></script>
239
+ <script src="js/ex5_index.js"></script>
204
-
240
+
205
- <title>書籍購入ページ</title>
241
+ <title>演習問題５：書籍購入ページ</title>
206
242
 
207
243
  </head>
208
244
 
@@ -210,7 +246,7 @@
210
246
 
211
247
  <body>
212
248
 
213
- <h1>書籍購入ページ</h1>
249
+ <h1>演習問題５：書籍購入ページ</h1>
214
250
 
215
251
  <div id="output_books"></div>
216
252
 
@@ -222,7 +258,7 @@
222
258
 
223
259
  </form>
224
260
 
225
- <a href="ex_check.html">会計ページへ</a>
261
+ <a href="ex5_check.html">会計ページへ</a>
226
262
 
227
263
  </body>
228
264
 
@@ -233,3 +269,115 @@
233
269
 
234
270
 
235
271
  ```
272
+
273
+ ```
274
+
275
+ 会計ページ(JavaScript)
276
+
277
+ document.addEventListener("DOMContentLoaded", () => {
278
+
279
+ let json = getJSON("json_key");
280
+
281
+ let checkBookIdList = getJSON("book_id_list");
282
+
283
+ if (checkBookIdList == null) {
284
+
285
+ checkBookIdList = [];
286
+
287
+ }
288
+
289
+ console.log(checkBookIdList);
290
+
291
+ for (let key of checkBookIdList) {
292
+
293
+ let title = json[key].title;
294
+
295
+ let author = json[key].author;
296
+
297
+ let publish = json[key].publish;
298
+
299
+ let price = json[key].price;
300
+
301
+ let image = json[key].image;
302
+
303
+ $("output_books").innerHTML += `
304
+
305
+ id： ${key}<br>
306
+
307
+ 書籍名： ${title}<br>
308
+
309
+ 著者名： ${author}<br>
310
+
311
+ 出版社名： ${publish}<br>
312
+
313
+ 価格： ${price}<br>
314
+
315
+ <img src="${image}"></img><br><br>
316
+
317
+ <br>
318
+
319
+ `;
320
+
321
+ }
322
+
323
+ let sum = 0;
324
+
325
+ for(let key of checkBookIdList){
326
+
327
+ sum += json[key].price;
328
+
329
+ }
330
+
331
+
332
+
333
+ console.log(sum);
334
+
335
+ $("output_check").textContent = sum;
336
+
337
+ });
338
+
339
+
340
+
341
+ ```
342
+
343
+ ```
344
+
345
+ (HTML)
346
+
347
+ <!DOCTYPE html>
348
+
349
+ <html>
350
+
351
+
352
+
353
+ <head>
354
+
355
+ <meta charset="UTF-8">
356
+
357
+ <script src="js/com_ex.js"></script>
358
+
359
+ <script src="js/ex5_check.js"></script>
360
+
361
+ <title>演習問題５：書籍会計ページ</title>
362
+
363
+ </head>
364
+
365
+
366
+
367
+ <body>
368
+
369
+ <h1>演習問題５：書籍会計ページ</h1>
370
+
371
+ <div id="output_books"></div>
372
+
373
+ 合計金額： <span id="output_check"></span>円
374
+
375
+
376
+
377
+ </body>
378
+
379
+
380
+
381
+ </html>
382
+
383
+ ```

1

ご指摘ありがとうございます。HTML部分を追加しました。

2017/07/03 13:42

投稿

MTT
MTT

スコア9

test CHANGED
File without changes
test CHANGED
@@ -42,7 +42,7 @@
42
42
 
43
43
  ```
44
44
 
45
- 登録ページのソースコードの一部
45
+ 登録ページのソースコードの一部(JavaScript)
46
46
 
47
47
  document.addEventListener("DOMContentLoaded", () => {
48
48
 
@@ -72,7 +72,59 @@
72
72
 
73
73
 
74
74
 
75
+ (HTML)
76
+
77
+
78
+
79
+ <!DOCTYPE html>
80
+
81
+ <html>
82
+
83
+ <head>
84
+
85
+ <meta charset="UTF-8">
86
+
87
+ <script src="js/com_ex.js"></script>
88
+
89
+ <script src="js/ex_entry.js"></script>
90
+
91
+ <title>書籍登録ページ</title>
92
+
93
+ </head>
94
+
95
+
96
+
97
+ <body>
98
+
99
+ <h1>書籍登録ページ</h1>
100
+
101
+ <form>
102
+
103
+ id: <input type="text" id="input_id" /> <br>
104
+
105
+ 書籍名: <input type="text" id="input_title" /><br>
106
+
107
+ 著者名: <input type="text" id="input_author" /><br>
108
+
109
+ 出版社名: <input type="text" id="input_publish" /> <br>
110
+
111
+ 価格: <input type="text" id="input_price" /><br>
112
+
113
+
114
+
115
+ <button type="button" id="set_btn">保存</button>
116
+
117
+ </form>
118
+
119
+
120
+
121
+ </body>
122
+
123
+ </html>
124
+
125
+
126
+
75
- 一覧ページのソースコードの一部
127
+ 一覧ページのソースコードの一部(JavaScript)
76
128
 
77
129
  let json = getJSON("json_key");
78
130
 
@@ -132,4 +184,52 @@
132
184
 
133
185
 
134
186
 
187
+ (HTML)
188
+
189
+
190
+
191
+ <!DOCTYPE html>
192
+
193
+ <html>
194
+
195
+
196
+
197
+ <head>
198
+
199
+ <meta charset="UTF-8">
200
+
201
+ <script src="js/com_ex.js"></script>
202
+
203
+ <script src="js/ex_index.js"></script>
204
+
205
+ <title>書籍購入ページ</title>
206
+
207
+ </head>
208
+
209
+
210
+
211
+ <body>
212
+
213
+ <h1>書籍購入ページ</h1>
214
+
215
+ <div id="output_books"></div>
216
+
217
+ <form>
218
+
219
+ id: <input type="text" id="input_id" /> <br>
220
+
221
+ <button type="button" id="buy_btn">購入</button>
222
+
223
+ </form>
224
+
225
+ <a href="ex_check.html">会計ページへ</a>
226
+
227
+ </body>
228
+
229
+
230
+
231
+ </html>
232
+
233
+
234
+
135
235
  ```