うーん・・・

JavaScriptの修正出来る方お力添え下さい

締切済

質問者：tanakaokada
質問日時：2018/04/10 18:59
回答数：1件

以下の1データ入力で入力したキー、バリュー1を2データ入力結果で出力し、結果を削除、修正し保存するには何処を訂正すべきですか？

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1 …
</head>
<body>
<b><dd>1データ入力</dd></b>
<ul>
<li><input type="text" id="todoItem" name="todo" />キー(必須)</li>
<li>
<input id="todovalue" name="todovalue" type="value"/>バリュー1(数字)
</li>
</ul>
<ul>
<li>a.<input type="button" id="btnAddTodo" value="登録"/></li>
<li>b.<input type="button" id="btnResetTodo" value="削除"/></li>
</ul>
<br>
<b>2.データ入力結果</b>
<ul id="todoItems">データ入力結果</ul>

<script>
var db; //
var indexedDB = window.indexedDB || window.mozIndexedDB || window.msIndexedDB || window.webkitIndexedDB;
if (indexedDB) {
var app = {}
app.indexedDB = {};
app.indexedDB.db = null;
} else {
window.alert("IndexedDBが使えません");
}
app.indexedDB.open = function() {
var version = 1;
var openRequest = indexedDB.open("todoList", version);
openRequest.onupgradeneeded = function(e) {
app.indexedDB.db = e.target.result;
var store = app.indexedDB.db.createObjectStore( "todo" , { "keyPath" :"text"} );
store.createIndex("myvalueIndex", "text2");
e.target.transaction.oncomplete = function() {
app.indexedDB.getAllTodoItems();
};
}
openRequest.onsuccess = function(e) {
app.indexedDB.db = e.target.result;
app.indexedDB.getAllTodoItems();
};
openRequest.onerror = function(e) {
console.log("Database error: " + e.target.errorCode);
};
};

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

app.indexedDB.getAllTodoItems = function() {
var initTodoItems = $("#todoItems").html("");
var initTodoItem = $("#todoItem").val("");
var initTodovalue = $("#todovalue").val("");
var db = app.indexedDB.db;
var trans = db.transaction("todo", "readwrite");
var store = trans.objectStore("todo");
var value = document.getElementById("todovalue").value;
var cursorRequest = store.openCursor();
cursorRequest.onsuccess = function(e) {
var result = e.target.result;
if(!!result == false)
return;
renderTodo(result.value);
result.continue();
};
};

app.indexedDB.addTodo = function() {
var db = app.indexedDB.db;
var trans = db.transaction("todo", "readwrite");
var store = trans.objectStore("todo");
var todoText = $("#todoItem").val();
var todoValue = $("#todovalue").val();
if( todoText == "") return;
var data = {
"text": todoText,
"text2": parseInt(todoValue),
"timeStamp": new Date().getTime()
};
var request = store.put(data);
request.onsuccess = function(e) {
app.indexedDB.getAllTodoItems();
};
request.onerror = function(e) {
console.log("Error Adding: ", e);
};
};

app.indexedDB.deleteTodo = function(e) {
var db = app.indexedDB.db;
var trans = db.transaction("todo", "readwrite");
var store = trans.objectStore("todo");
var id = Number(e.target.id);
var request = store.delete(id);
request.onsuccess = function(e) {
init();
};
};

function renderTodo(row) {
var $todoItems = $("#todoItems");
$todoItems.append("<li>" + "<dd>" + row.text + "</dd>" + "<dd>" + row.text2 + "</dd>" + "<a id='" + row.text + "' class='btnDeleteTodo' href='#'>[ 削除 ]</a>" + "<a id='" + row.text + "'class='btnAddTodo' href='#'>[ 修正 ]</a></li>");

jQuery(function($){
$('dd').click(function(){
if(!$(this).hasClass('on')){
$(this).addClass('on');
var txt = $(this).text();
$(this).html('<input type="text" value="'+txt+'" />');
}
});
});
}
function init() {
app.indexedDB.open();
}

$(function(){
var $btnAddTodo = $("#btnAddTodo");
var $btnResetTodo = $("#btnResetTodo");
$btnAddTodo.on("click",app.indexedDB.addTodo);
$btnResetTodo.on("click",app.indexedDB.resetTodo);
$(document).on('click', '.btnDeleteTodo', app.indexedDB.deleteTodo);
init();
});
</script>
</body>
</html>