複数のメモを一度に記入・保存・表示する方法

###前提・実現したいこと

Monaca Docs のサンプルアプリ＆テンプレートにある、
メモ帳アプリ（localStorage を使用して、メモ帳アプリを作成するサンプルアプリ）を参考にjavascriptを勉強しながらオリジナルアプリを作っています。
↓こちらが参考にしたページです。
https://docs.monaca.io/ja/sampleapp/samples/memo_application/

メモ帳アプリではメモ欄が１つだけですが、オリジナルアプリではメモ欄を複数作り、保存・表示できるようにしたいと考えています。

###発生している問題・エラーメッセージ
現在、複数のメモ欄自体はhtml上で作成できるのですが、複数のtextに記入したメモを表示・保存することができません。

html
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <link rel="stylesheet" href="components/loader.css">
8    <link rel="stylesheet" href="css/style.css">
9</head>
10<body>
11
12    <!-- 記事の　記入・削除・閲覧ページ -->
13    <div data-role="page" id="TopPage">
14        <header data-role="header" data-position="fixed" data-theme="c">
15            <h2>一覧</h2>
16            <a href="#AddPage" data-icon="plus" class="ui-btn-right">記入</a>
17        </header>
18        <section data-role="content">
19            <ul id="TopListView" data-role="listview" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-split-icon="delete">
20            </ul>
21        </section>
22    </div>
23
24    <!-- 記入ページ -->
25    <div data-role="page" id="AddPage">
26        <header data-role="header" data-position="fixed" data-theme="c">
27            <a data-role="button" data-rel="back" data-icon="back">戻る</a>
28            <h1>記入ページ</h1>
29        </header>
30        <section data-role="content">
31            <label for="Memo">Memo:</label>
32      <textarea id="Memo"></textarea>
33<a data-role="button" data-icon="check" id="SaveBtn">保存する</a>
34</section>
35    </div>
36
37    <!-- 選択した記事の詳細を閲覧するページ -->
38    
39    <script>
40    //選択したチェックボックスの値を呼び出すためのjs
41        //テキスト保存
42        function SaveKeyValue() {
43        if (window.localStorage != null) {
44        key = document.forms.form1.Text_key.value;
45        value = document.forms.form1.Text_value.value;
46        
47        window.localStorage.setItem(key, value);
48        }    
49        }
50        
51        //テキスト読み込み
52        function LoadKeyValue() {
53        if (!window.localStorage != null) {
54        key = document.forms.form1.Text_Key.value;
55        value = window.localStorage.getItem(key)
56        document.forms.form1.Text_value.value;   
57        }   
58        }
59        
60    </script>
61    
62    <div data-role="page" id="ShowPage">
63        <header data-role="header" data-position="fixed" data-theme="c">
64            <a data-role="button" data-rel="back" data-icon="back">戻る</a>
65            <h1></h1>
66        </header>
67        <section section data-role="content">
68            <b><u>memo1</u>:</b>
69            <p></p>
70        </section>
71        <section section data-role="content">
72            <b><u>memo2</u>:</b>
73            <p></p>
74        </section>
75
76        
77    </div>
78    
79<script src="components/loader.js"></script>
80<script src="js/memo.js"></script>
81<script src="js/app.js"></script>
82<script src="js/cssua.min.js"></script>
83</body>
84</html>
85

js
1///// Save memo and return to top page　入力→保存→関数内に記述された addMemo() 関数 ( memo.js ファイルで定義 ) を経由して、localStorage に入力テキストが保存　更新された一覧をトップページ上に表示
2function onSaveBtn() {
3    var text = $("#Memo").val();
4    if (text != '') {
5        // Save to local storage
6        addMemo(text);
7        // Clear form
8        $("#Memo").val("");
9        // Initialize top page
10        initTopPage();
11    }
12    $.mobile.changePage("#TopPage", { reverse: true });
13}
14
15///// Initialize top page　アプリを起動→保存されている記事を取得して、一覧で表示
16function initTopPage() {
17    $("#TopListView").empty();
18    
19    var list = getMemoList();
20    for (var i in list) {
21        var memo = list[i];
22        var d = new Date(memo.time);
23        var date = d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate();
24        
25        $li = $("<li><a href='#' class='show'><h3></h3><p></p></a><a href='#' class='delete'>Delete</a></li>");
26        $li.data("id", memo.id);
27        $li.find("h3").text(date);
28        $li.find("p").text(memo.text);
29        $("#TopListView").prepend($li);
30    }
31    if (list.length == 0) {
32        $li = $("<li>記事がありません</li>");
33        $("#TopListView").prepend($li);
34    }
35    $("#TopListView").listview("refresh");  // Call refresh after manipulating list
36}
37
38///// Move to detail page　選択した記事の詳細閲覧ページ
39function onShowLink() {
40    var $li = $(this).parent();
41    var memoTitle = $li.find("h3").text();
42    var memoHtml = $li.find("p").html().replace(/\n/g, "<br>");
43    
44    $("#ShowPage h1").text(memoTitle);
45    $("#ShowPage p").html(memoHtml);
46    $.mobile.changePage("#ShowPage");
47}
48
49///// Delete memo　バツボタン→削除
50function onDeleteLink() {
51    if (!confirm("この記事を削除しますか?")) {
52      return;
53    }
54    var $li = $(this).parent();
55    var id = $li.data("id");
56    deleteMemo(id);
57    
58    initTopPage();
59    
60    // Return to top
61    $.mobile.changePage("#TopPage", { reverse: true });
62}
63
64///// Called when app launch
65function onReady() {
66    initTopPage();
67    $("#SaveBtn").click(onSaveBtn);
68    $("#TopListView").on("click", "a.show", onShowLink);
69    $("#TopListView").on("click", "a.delete", onDeleteLink);
70}
71
72$(onReady); // on DOMContentLoaded

js
1///// このファイルはlocalStorage に対する一連のデータ処理を行うための JavaScript ファイル
2/////  localStorage に保存された記事の一覧を取得
3function getMemoList() {
4    var list = localStorage.getItem("memo_list");
5    if (list == null) {
6        return new Array();
7    } else {
8        return JSON.parse(list);
9    }
10}
11　
12///// 一覧を localStorage に保存
13function saveMemoList(list) {
14    try {
15        localStorage.setItem("memo_list", JSON.stringify(list));
16    } catch (e) {
17        alert('Error saving to storage.');
18        throw e;
19    }
20}
21
22///// 新規の記事を一覧に追加して、localStorage に新規の一覧を保存
23function addMemo(text) {
24  var list = getMemoList();
25  var time = new Date().getTime();
26  list.push({ id: time, time: time, text: text });
27  saveMemoList(list);
28}
29
30///// 一覧から指定された記事を削除して、localStorage に削除後の一覧を保存
31function deleteMemo(id) {
32    var list = getMemoList();
33    for (var i in list) {
34        if (list[i].id == id) {
35            list.splice(i, 1);
36            break;  // Quit for loop when found
37        }
38    }
39    saveMemoList(list);
40}

###試したこと
https://docs.monaca.io/ja/sampleapp/samples/memo_application/
で言うmemo.jsファイルを複数作り値を変えてみたものの、１つテキストボックスに入力した同じ内容が複数回表示されてしまいました。

###補足情報(言語/FW/ツール等のバージョンなど)
プログラミング初心者でjavascriptを勉強中です。基本的な質問で恐縮ですが、アドバイス等いただけると幸いです。よろしくお力添えのほどお願い申し上げます。

Lhankor_Mhy

2017/10/13 06:05

『値を変えてみた』とは、具体的には、どの値をどのように変えたのでしょうか。

行動規範の内容に同意します

回答1件

勉強ということなので、答えは載せずに個人的な指針だけ示しておきます。(他にもやり方はたくさんあると思います)

(1)htmlの#AddPage内にtextareaを追加
(2)app.jsのonSaveBtn関数で(1)で追加したtextareaの情報を取得できるようにして、
memo.jsのaddMemo関数に渡す。
(3)addMemoで複数テキストをlistにプッシュできるようにする。
----ここまでで保存はできるようになるはず。(JSON形式から逸脱さえしなければ)

(4)app.jsのinitTopPage関数でリストにテキストを出せるようにする。(TOPページの対応)
⇒詳細ページに表示されるのは現状Topページに表示されたテキストがほぼそのまま表示される(onShowLink関数の処理)ので、
Topページのリストの表示を工夫するか、詳細ページを表示する際に書き換えるような仕組みが必要。

投稿2017/10/14 02:55