###前提・実現したいこと
JavaScript初心者です。学校の課題で書籍の購入サイトを作成しています。
「書籍登録ページ」にて書籍のid,タイトル,著者,出版社,値段,画像のURLを入力したら、「書籍購入ページ」にて入力した書籍のid~値段の情報、そして画像が表示されるようになっています。同ページの一番下に商品のidを入力するフォームがあり、希望の商品のidを入力して「購入」ボタンを押し、希望の商品を購入し終えたタイミングで購入ボタンの下の「会計」ボタンを押すことで購入した商品の総額が表示されるようになっています。
実装中に以下のエラーメッセージが発生しました。
###発生している問題・エラーメッセージ
Uncaught TypeError: Cannot read property 'title' of undefined
at HTMLDocument.document.addEventListener
###該当のソースコード
JavaScript
1console.log(checkBookIdList); 2 for (let key of checkBookIdList) { 3 let title = json[key].title; 4 let author = json[key].author; 5 let publish = json[key].publish; 6 let price = json[key].price;
###補足情報(言語/FW/ツール等のバージョンなど)
登録ページのソースコード(JavaScript) document.addEventListener("DOMContentLoaded", () => { $("set_btn").addEventListener("click", () => { let id = $("input_id").value; let title = $("input_title").value; let author = $("input_author").value; let publish = $("input_publish").value; let price = Number($("input_price").value); let image = $("input_image").value; let json = getJSON("json_key"); if (json == null) { json = {}; } json[id] = {"title": title, "author": author, "publish": publish, "price": price, "image": image }; // idをキーとしてjson形式で書籍情報を保存 console.log(JSON.stringify(json)); setJSON("json_key", json); }); });
(HTML) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/com_ex.js"></script> <script src="js/ex5_entry.js"></script> <title>演習問題5:書籍登録ページ</title> </head> <body> <h1>演習問題5:書籍登録ページ</h1> <form> id: <input type="text" id="input_id" /> <br> 書籍名: <input type="text" id="input_title" /><br> 著者名: <input type="text" id="input_author" /><br> 出版社名: <input type="text" id="input_publish" /> <br> 価格: <input type="text" id="input_price" /><br> 画像: <input type="text" id="input_image" /><br> <button type="button" id="set_btn">保存</button> </form> </body> </html>
書籍一覧ページ(JavaScript) document.addEventListener("DOMContentLoaded", () => { let json = getJSON("json_key"); for (let key in json) { let title = json[key].title; let author = json[key].author; let publish = json[key].publish; let price = json[key].price; let image = json[key].image; $("output_books").innerHTML += ` id: ${key}<br> 書籍名: ${title}<br> 著者名: ${author}<br> 出版社名: ${publish}<br> 価格: ${price}<br> <img src="${image}"></img><br><br> <br> `; } let checkBookIdList = getJSON("book_id_list"); // localStorageからcheckBookIdListを取得 if (checkBookIdList == null) { checkBookIdList = []; } console.log(checkBookIdList); $("buy_btn").addEventListener("click", () => { let id = $("input_id").value; checkBookIdList.push(id); // idをcheckBookIdListに追加 console.log(checkBookIdList); setJSON("book_id_list" , checkBookIdList); // localStorageにcheckBookIdListを保存 }); });
(HTML) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/com_ex.js"></script> <script src="js/ex5_index.js"></script> <title>演習問題5:書籍購入ページ</title> </head> <body> <h1>演習問題5:書籍購入ページ</h1> <div id="output_books"></div> <form> id: <input type="text" id="input_id" /> <br> <button type="button" id="buy_btn">購入</button> </form> <a href="ex5_check.html">会計ページへ</a> </body> </html>
会計ページ(JavaScript) document.addEventListener("DOMContentLoaded", () => { let json = getJSON("json_key"); let checkBookIdList = getJSON("book_id_list"); if (checkBookIdList == null) { checkBookIdList = []; } console.log(checkBookIdList); for (let key of checkBookIdList) { let title = json[key].title; let author = json[key].author; let publish = json[key].publish; let price = json[key].price; let image = json[key].image; $("output_books").innerHTML += ` id: ${key}<br> 書籍名: ${title}<br> 著者名: ${author}<br> 出版社名: ${publish}<br> 価格: ${price}<br> <img src="${image}"></img><br><br> <br> `; } let sum = 0; for(let key of checkBookIdList){ sum += json[key].price; } console.log(sum); $("output_check").textContent = sum; });
(HTML) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/com_ex.js"></script> <script src="js/ex5_check.js"></script> <title>演習問題5:書籍会計ページ</title> </head> <body> <h1>演習問題5:書籍会計ページ</h1> <div id="output_books"></div> 合計金額: <span id="output_check"></span>円 </body> </html>
回答1件
あなたの回答
tips
プレビュー