IndexedDB をなぞってみる - babu_babu

JavaScriptの修正を助けて下さい
https://oshiete.goo.ne.jp/qa/10251931.html

なぜ Firefox で動かない！ Help me!!

いつも質問者への回答は、ちゃぶ台をひっくり返したように例題を無視して一から書きたくなる性分なのだが、今回は質問者のプログラムを修正する形で書いてみた。こういうアレンジだとコードを読むのが楽だと思う。
Ajaxを使って裏でデータを読みまくりデータベースを構築するのも良いのではないか？ともおもったが、ページが遷移してしまうと無駄になりそう。つぎにレスが付いたら、いよいよ波インデントだ！

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<title>IndexedDB test</title>
<style>
body {
  background-image: linear-gradient(-90deg, #495B4B, #FFFFFF);
}

h1, h2, h3, h4, h5, h6, th {
  font-weight: normal;
}


body {
  counter-reset : no 0;
}

fieldset {
  box-shadow: 3px 3px 8px rgba(0,0,0,.6);
  border: 2px silver solid;
  border-radius: 8px;
  margin-bottom: 1em;
}

legend, table {
  color: #343;
  text-shadow: -1px -1px 0px white, 1px 1px 2px black;
}

legend:before {
  counter-increment : no 1;
  content           : "[" counter(no, upper-latin) "]";
  padding-right     : 1ex;
}

</style>

<body>
<fieldset>
  <legend>Input</legend>
  <table>
    <tr>
      <th>バリュー1値
      <td><input id="todovalue" name="todovalue" type="text">
    <tr>
      <th>キー値
      <td><input type="text" id="todoItem" name="todo">
          <input type="button" id="btnAddTodo" value="追加">
  </table>

  <h4>追加結果表示</h4>
  <ul id="todoItems">
  </ul>
</fieldset>


<fieldset>
  <legend>Serach</legend>
  キー値の入力<input type="text" id="selectkey">
  <input type="button" value="検索" id="btngetValue">
</fieldset>


<fieldset>
  <legend>Result</legend>
  <div id="result"></div>
</fieldset>



<script>
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.msIndexedDB || window.webkitIndexedDB;

const
  DATA_BASE_NAME   = 'todoList',
  TRANSACTION_NAME = 'todo';


if (indexedDB)
  var app = { indexedDB: {db: null} };
else
  throw new Error (alert ("IndexedDBが使えません"));


app.indexedDB.open =
  function () {
    let openRequest = indexedDB.open (DATA_BASE_NAME);

    openRequest.onupgradeneeded = function ({target}) {
      (app.indexedDB = target.result)
        .createObjectStore (TRANSACTION_NAME, { keyPath: 'key' })
        .createIndex ('val', 'val', { unique: false });
      
      target.transaction.oncomplete = function () {
        app.indexedDB.getAllTodoItems();
      };
    };

    openRequest.onsuccess = function ({target: { result }}) {
      app.indexedDB.db = result;
      app.indexedDB.getAllTodoItems ();
    };

    openRequest.onerror = function (e) {
      console.log ('Database error: ' + e.target.error);
    };
  };



app.indexedDB.deleteDB =
  function () {
    indexedDB.deleteDatabase (DATA_BASE_NAME);
  };



app.indexedDB.getAllTodoItems =
  function () {
    let doc = document;
   
    doc.querySelector ('#todoItems').textContent =
    doc.querySelector ('#todoItem').value =
    doc.querySelector ('#todovalue').value = '';

    app.indexedDB.db
       .transaction (TRANSACTION_NAME, 'readonly')
       .objectStore (TRANSACTION_NAME)
       .openCursor ()
       .onsuccess =
         function ({target: { result }}) {
           if (result) {
             renderTodo (result.value);
             result.continue ();
           }
         };

    function renderTodo ({ key, val }) {
      let
        doc = document,
        items = doc.querySelector ('#todoItems'),
        li = doc.createElement ('li'),
        a = doc.createElement ('a');
      
      li.textContent = key + ' = ' + val;
      a.textContent ='[ 削除 ]';
      a.href = '#key=' + key;
      a.className = 'btnDeleteTodo';
      
      items.appendChild (li).appendChild (a);
    }
  };



app.indexedDB.addTodo =
  function () {
    let
      doc = document,
      key = doc.querySelector ('#todoItem').value,
      val = doc.querySelector ('#todovalue').value;

    if ('' !== key) {
      let request = app.indexedDB.db
                       .transaction ([TRANSACTION_NAME], 'readwrite')
                       .objectStore (TRANSACTION_NAME)
                       .add ({ key, val });

      request.onsuccess = function (_) { app.indexedDB.getAllTodoItems (); };
      request.onerror   = function (event) { console.log ('Error Adding: ', event); };
    }
  };



app.indexedDB.getValue =
  function (_){
    app.indexedDB.db
       .transaction ([TRANSACTION_NAME])
       .objectStore (TRANSACTION_NAME)
       .get (document.querySelector ('#selectkey').value)
       .onsuccess = 
         function ({target: { result }}) {
           document.querySelector ('#result').textContent = result
           ? 'key：' + result.key + ' value：' + result.val
           : '指定したキーは存在しません。';
         };
  };



app.indexedDB.handleEvent =
  function ({ target }) {
    switch (target.id) {
    case 'btnAddTodo' : return app.indexedDB.addTodo ();
    case 'btngetValue' : return app.indexedDB.getValue ();
    }
    switch (target.className) {
    case 'btnDeleteTodo' :
      
      break;
    }
  };

//_________________________
init:
document.addEventListener ('click', app.indexedDB, false);
app.indexedDB.open();

</script>

JavaScriptの修正を助けて下さいhttps://oshiete.goo.ne.jp/qa/10251931.html

JavaScriptの修正を助けて下さい
https://oshiete.goo.ne.jp/qa/10251931.html