急いでいます！

JavaScript得意な方教えてください

解決済

質問者：tanakaokada
質問日時：2018/08/28 22:45
回答数：1件

下3検索の結果が表示されません。何処を修正すれば良いですか？
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1 …
</head>
<body>
<b>1入力</b>
<li><input type="text" id="todoItem" name="todo" />キー(必須)</li>
<li>
<input id="todovalue" name="todovalue" type="value"/>バリュー1
</li>
<ul>
<li>a.<input type="button" id="btnAddTodo" value="登録"/></li>
</ul>

<b>2入力結果</b>
<ul id="todoItems">入力結果</ul>
<hr>

<h3>3検索</h3>
バリュー1値検索<input type="text" id="selectValue1" />
<input type="button" value="指定出力" id="btngetValue1"/><br>※バリュー1値を入力し、一致するキー及びバリュー1の値を出力
<h3>4検索結果</h3>
<div id="result"/>

<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 store2 = app.indexedDB.db.createObjectStore( "todo2" , { "keyPath" :"text"} );
store2.createIndex("myvalueIndex",["text2"],{unique:false,multiEntry:false,});
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("todo2", "readwrite");
var store = trans.objectStore("todo2");
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();
};
};

//2.データ入力結果
app.indexedDB.addTodo = function() {
var db = app.indexedDB.db;
var trans = db.transaction("todo2", "readwrite");
var store = trans.objectStore("todo2");
var todoText = $("#todoItem").val();
var todoValue = $("#todovalue").val();
if( todoText == "") return;
var data = {
"text": todoText,
"text2": todoValue,
};
var request = store.put(data);
request.onsuccess = function(e) {
app.indexedDB.getAllTodoItems();
};
request.onerror = function(e) {
console.log("Error Adding: ", e);
};
};

function renderTodo(row) {
var $todoItems = $("#todoItems");
$todoItems.append("<li>" + row.text + row.text2 + "</li>");
}

//3検索
app.indexedDB.getValue1 =function(e){
var db = app.indexedDB.db;
var value1 = document.getElementById("selectValue1").value;
var value2 = document.getElementById("selectValue1").value;
var trans = db.transaction(["todo2"], "readonly");
var store = trans.objectStore("todo2");
var index = store.index("myvalueIndex");
var range = IDBKeyRange.bound(value1, value2);
var request = index.openCursor(range);
var result = document.getElementById("result");
result.innerHTML = "";
request.onsuccess = function (e) {
var cursor = e.target.result;
if(cursor) {
var data = cursor.value;
result.innerHTML += "キー: " + cursor.primaryKey + ", バリュー1: " + cursor.key +"<br/>";
cursor.continue();
}
}
}

function init() {
app.indexedDB.open();
}

$(function(){
var $btnAddTodo = $("#btnAddTodo");
var $btngetValue1 = $("#btngetValue1");
$btnAddTodo.on("click",app.indexedDB.addTodo);
$btngetValue1.on("click",app.indexedDB.getValue1);
init();
});
</script>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： babu_babu_baboo
回答日時：2018/08/29 15:00

定期的に似たような質問をされているようだけれど。

未だ解決に至らないようですね。
過去に無視されたので思慮深く見る気がおきませんが、
まず、<div id="result"/>が閉じていないのに innerHTML で書き換えているのが構造上の欠陥。
要所要所に console.log を挟んで変数の内容を随時確認することをおすすめします。
元は誰が書いたコードなのかしりませんが、 app オブジェクトに意味もなく集約させないで、
1つ1つ関数を作って確認しながら進めると理解しやすはずです。