急いでいます！

JavaScriptの修正を助けて下さい

解決済

質問者：tanakaokada
質問日時：2018/01/30 16:49
回答数：4件

以下のJavaScriptが思うように動作しません。
A.バリュー１、キー値の追加で追加した値を
B.バリュー値の検索で検索し
C.処理結果に表示したいのですが、何処を修正すれば良いのでしょうか？

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<b>A.バリュー１、キー値の追加</b>
<ul>
<li>バリュー1値
<input id="todovalue" name="todovalue" type="text"/>
</li>

<li>キー値<input type="text" id="todoItem" name="todo" /></li>
</ul>
<input type="button" id="btnAddTodo" value="追加"/><br><br>
<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 = webkitIndexedDB.open("todoList", version);
// データベースの初回時オープン時とバージョンの変更時に呼ばれる
openRequest.onupgradeneeded = function(e) {
app.indexedDB.db = e.target.result;
// オブジェクト・ストアの作成
var store = app.indexedDB.db.createObjectStore( "todo" , { "keyPath" : "timeStamp"} );
store.createIndex("myvalueIndex", "myvalue");
e.target.transaction.oncomplete = function() {
app.indexedDB.getAllTodoItems();
};
}
// IndexedDBオープン成功時に呼ばれる
openRequest.onsuccess = function(e) {
// 宣言していた app.indexedDB.db に IDBDatabaseオブジェクトを格納
app.indexedDB.db = e.target.result;
app.indexedDB.getAllTodoItems();
};
// IndexedDBオープンの失敗時に呼ばれる
openRequest.onerror = function(e) {
// エラーがおこった場合、一旦コンソールログで確認
console.log("Database error: " + e.target.errorCode);
};
};

app.indexedDB.deleteDB = function() {
// todosデータベースを削除する
webkitIndexedDB.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": 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);
};
};

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

app.indexedDB.getValue =function(e){
var db = app.indexedDB.db;
var key2 = document.getElementById("selectkey").value;
var result = document.getElementById("result");
result.innerHTML = "";
var trans = db.transaction("[todo]", "readwrite");
var store = trans.objectStore("todo");
var request = store.get(key2);
request.onsuccess = function (e) {
if (e.target.result === undefined) {
result.innerHTML = "指定したキーは存在しません。";
} else {
result.innerHTML = "key2：" + e.target.result.key2 + " value：" + e.target.result.text + "<br/>"
}
}
}

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

// 読み込み実行
$(function(){
var $btnAddTodo = $("#btnAddTodo");
var $btngetValue = $("#btngetValue");
$btnAddTodo.on("click",app.indexedDB.addTodo);
$btngetValue.on("click",app.indexedDB.getValue);
init();
});
</script>
<hr />

<h3>B.バリュー値の検索</h3>
キー値の入力<input type="text" id="selectkey" />
<input type="button" value="検索" id="btngetValue"/>

<h3> C.処理結果</h3>
<div id="result"/>
</body>
</html>

通報する

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

質問の本文を隠す

回答 (4件)

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

No.1ベストアンサー

回答者： babu_babu_baboo
回答日時：2018/01/31 02:23

var indexedDB = window.indexedDB || window.mozIndexedDB || window.msIndexedDB ||　win

これに全角空白が！
ーー
var openRequest = webkitIndexedDB.open("todoList", version);
のwebkitIndexedDB？
ーー
var trans = db.transaction("[todo]", "readwrite");
の
"[todo]"が["todo"]
ーー
var store = app.indexedDB.db.createObjectStore ("todo", { "keyPath" : "timeStamp" });
タイムスタンプでいいの？
ーー
app.indexedDB.getValue　の
request.onsuccess = function (e) {　の
if (e.target.result === undefined) {　は
request.result を参照なんじゃ？
ーー
result.innerHTML = "key2：" + e.target.result.key2 + " value：" + e.target.result.tex　の
e.target.result.key2　は？
ーー
まだまだありそうだけど、あとはトライ＆ごう？！

- 0
- 件

通報する

参考程度に

No.4

回答者： fujillin
回答日時：2018/01/31 16:17

こんにちは

ちゃんと見てませんけれど・・・
https://oshiete.goo.ne.jp/qa/10131683.html
からほとんど変わっていないように見受けられます。

前回も書きましたけれど、（クロスブラウザ対応のつもりだと思いますが）IDBFactoryオブジェクトを取得以降に、プレフィックス付きのオブジェクトを使っているので、ブラウザ限定のスクリプトになっていますね。
おまけに、（webkit系はChromeだと思いますが）Chromeではプレフィックス付きは非推奨になっていて、手元のChrome63だと既にエラーになってしまうようです。（なので、どのブラウザでも動かない可能性が…）

あとは、前回回答のように、検索時のオブジェクトは（当然のことながら）定義した際の key:value 形式で返されるので、そのあたりを一貫させることが必要だと思います。

ついでに、No.3様へ
＞＞よほど長い回答をしない限りは大丈夫かな(笑)
＞（さっそくやっちまったじゃないか！）
元が長いから仕方がないけれど、部分だけの回答にしてしまえば長くはならない(笑）
さらには、CSS入れて、jQuery外した分だけ（←外すのはもっともですが）、長くなっているかも？

- 0
- 件

通報する

No.3

回答者： babu_babu_baboo
回答日時：2018/01/31 04:54

/*

連投ですみません！　やっぱり文字数制限に引っかかりました。
なので分割になります。

＞よほど長い回答をしない限りは大丈夫かな(笑)
（さっそくやっちまったじゃないか！）
）
*/

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>

- 0
- 件

通報する

No.2

回答者： babu_babu_baboo
回答日時：2018/01/31 04:50

全角空白は半角に置換してください。

自分も勉強のために試行錯誤してみました。
Firefoxで動かないのが痛い。その理由が知りたいです！
Chromeだと動きました。
--
<!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); };
　　}
　};