質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1279閲覧

書籍の購入ページの会計が上手くできません。JavaScript初心者です。

MTT

総合スコア9

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/07/03 10:34

編集2017/07/03 13:42

###前提・実現したいこと
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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/07/03 11:54

書かれている状況が再現するコード(HTML/CSS/JavaScriptなど)を省略せずに提示されたほうが回答を得やすいと思います。
kei344

2017/07/03 13:23

コードはそれぞれコードブロックに入れたほうが読みやすいですよ。また、提示されているJavaScriptはどちらもエラーになりますが、後ろが切れたりしていませんか?それともこれだけでしょうか。
guest

回答1

0

ベストアンサー

エラーが出る直前部分で console.log(json[key]); として試してみては?それもエラーになるのであれば console.log(json); として中身を確認してみてください。


getJSON setJSON $ などに独自の関数を作成されているようなので、状況の再現をあきらめました。

投稿2017/07/03 15:08

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MTT

2017/07/04 01:29

ありがとうございます。  エラーが発生する部分は会計(JavaScript)の9行目 let title = json[key].title; です。 その1行上に挿入すれば解決できるかもしれないということでしょうか? Chromeで実行してみたところ、一覧ページまでは正しく動作しているようです。
kei344

2017/07/04 02:09

> その1行上に挿入すれば解決できるかもしれないということでしょうか? 試してから聞いてください。また、「解決」ではなく「状況の確認」ができるだけです。問題が発生した場合、変数の中身がどこまで意図通りかを確認することで問題を切り分けていくものです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問