明るいものを見ても、目が痛くない！

しかし目が赤い。
依頼されていたプログラムを書き忘れていた。
無理して徹夜した。
合間に、回答する

JavaScriptのメモ帳アプリ編集について
http://oshiete.goo.ne.jp/qa/8596665.html

わがままそうだから無視されるだろう。

<!DOCTYPE html>
<meta charset="utf-8">
<title></title>
<style>
body > section {
  display : none;
}

#ViewPage > div {
  border: 2px green dotted;
  margin-top : 1em;
  padding : 1ex;
}

#LIST li {
  text-overflow: ellipsis;
}
</style>

<body>

<section id="TopPage">
  <header>
    <h1>TextMemo</h1>
  </header>
  <ol id="List">
  </ol>
</section>


<section id="EditPage">
  <header>
    <h1>Edit Memo</h1>
    <a href="#TopPage">Top</a>
    <a href="#Save">Save</a>
    <a href="#ViewPage">View</a>
  </header>

  <p>
    Memo:
  <p>
    <textarea cols="60" rows="10" id="Text"></textarea>
</section>


<section id="ViewPage">
  <header>
    <h1>View Memo</h1>
    <a href="#TopPage">Top</a>
    <a href="#Save">Save</a>
    <a href="#EditPage">Edit</a>
  </header>
  <div id="Content"></div>
</section>

<script>
/*
すべてのデータをDATA変数にし、JSON.stringifyでテキスト化しローカルストレージに保存する。
グローバル変数のNO は、現在参照されているDATAのインデクスを表す。

*/

//対照だけを表示
function disp (s) { s.style.display = this == s ? 'block': 'none' }

//子ノードを全削除
function remove (e) { while (e.hasChildNodes ()) e.removeChild (e.firstChild) }

//リストノードを作る
function createLI (t, h) {
  var d = document;
  var a = d.createElement ('a');
  var li = d.createElement ('li');
  
  a.href = h;
  return li.appendChild (a).appendChild (d.createTextNode (t)), li;
}


function hashCheck (h) {
  var p, n;
  
  if (p = /^(#ViewPage)-(\d+)$/.exec (h))　//ハッシュを調べページ指定があるか？
    h = p[1], NO = Number (p[2]);
  
  switch (h) {
  case '' :
  case '#TopPage' :
    remove (LIST);
    for (var i = 0, I = DATA.length; i < I; i++)
      LIST.appendChild (createLI (DATA[i].substring (0, 20), '#ViewPage-' + i));
    LIST.appendChild (createLI ('[New]', '#NewPage'));
    SECTION.forEach (disp, TOP);
    break;
  
  case '#NewPage' :
    NO = DATA.length;
  case '#EditPage' :
    TEXT.value = DATA[NO] || '';
    SECTION.forEach (disp, EDIT);
    break;

  case '#ViewPage' :
    CONTENT.innerHTML = DATA[NO];
    SECTION.forEach (disp, VIEW);
    break;

  case '#Save' :
    DATA[NO] = TEXT.value;
    localStorage.setItem ('TextData',JSON.stringify (DATA));
    alert ('Save OK!');
    break;
    
  default :
    return false;
  }
  
  return true;
}


function listener (event) {
  var e = event.target;
  if ('href' in e)
    if (hashCheck (e.getAttribute ('href')))
      event.preventDefault();
}


var DATA = JSON.parse (localStorage.getItem ('TextData')) || [];
var LIST = document.querySelector ('#List');
var TEXT = document.querySelector ('#Text');
var CONTENT = document.querySelector ('#Content');
var TOP = document.querySelector ('#TopPage');
var EDIT = document.querySelector ('#EditPage');
var VIEW = document.querySelector ('#ViewPage');
var SECTION = [ TOP, EDIT, VIEW ];
var NO;


hashCheck (location.hash);
document.addEventListener ('click', listener, false);
</script>

</body>
</html>

JavaScriptのメモ帳アプリ編集についてhttp://oshiete.goo.ne.jp/qa/8596665.html

JavaScriptのメモ帳アプリ編集について
http://oshiete.goo.ne.jp/qa/8596665.html