質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

1578閲覧

indexeddbの検索について

tetsu777

総合スコア39

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/12/01 04:42

編集2018/12/01 11:32

前回質問させて頂いた続きになりますが
●やりたい事
①以下の1登録・更新でsetValue関数で大分類、中分類、小分類に任意の値を登録
(例:大分類=日本、中分類=関東、小分類=東京
大分類=アメリカ、中分類=ニューヨーク州、小分類=ニューヨーク と登録

②3インデックスを使った検索で大分類を選択するとgetAllcate関数にて大分類に登録されている値を4処理結果2に一覧で表示
(例:日本、アメリカ が表示

③上記4処理結果2に表示された一覧の中から指定の値を選択する
(例:日本を選択

④その値を3インデックスを使った検索の大分類のinput欄に表示
(例:大分類=日本 と表示

⑤同様に3インデックスを使った検索の中分類、小分類を選択し、各input欄に表示
(例:中分類=関東、小分類=東京 と表示

⑥3インデックスを使った検索内の設定ボタンによりcopysetValue()関数に登録

●質問
上記④までは動作していますが、⑤の小分類の選択(getAllcate3関数)がevent.target.result == nullとなり、思うように動作しません

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <h3>1登録・更新</h3> <p>大分類:<input type="text" id="newvalue" placeholder="バリュー"/></p> <p>中分類:<input type="text" id="newvalue2" placeholder="バリュー2"/></p> <p>小分類:<input type="text" id="newkey" placeholder="キー"/></p> <input type="button" value="設定" onclick="setValue()"/> <h3>参照</h3> <input type="button" value="全取得" onclick="getAll()"/> <h3>2処理結果</h3> <div id="result"></div> <hr/> <h3>3インデックスを使った検索</h3> <form action="#"> <p>大分類:<input type="text" value="" readonly="readonly" name="copy" id="copy" onclick="getAllcate()" placeholder="バリュー"/></p> <p>中分類:<input type="text" value="" readonly="readonly" name="copy" id="copyvalue2" onclick="getAllcate2()" placeholder="バリュー2"/></p> <p>小分類:<input type="text" value="" readonly="readonly" name="copy" id="copyvalue3" onclick="getAllcate3()" placeholder="キー"/></p> <p>値:<input type="number" id="price" placeholder="値"/></p> <input type="button" value="設定" onclick="copysetValue()"/> <input type="button" value="全取得" onclick="copygetAll()"/> <h3>4処理結果2 </h3> <div id="result2"></div><hr> <div id="result3"></div><hr> <div id="result4"></div> </form> </body> <script> var db; var indexedDB = window.indexedDB || window.mozIndexedDB || window.msIndexedDB; if (indexedDB) { // データベースを削除したい場合はコメントを外します。 // indexedDB.deleteDatabase("mydb"); var openRequest = indexedDB.open("mydb", 1.0); openRequest.onupgradeneeded = function(event) { // データベースのバージョンに変更があった場合(初めての場合もここを通ります。) db = event.target.result; var store = db.createObjectStore("mystore", { keyPath: "mykey",autoIncrement:true}); store.createIndex("myvalueIndex",["myvalue","myvalue2"],{unique:false,multiEntry:false}); store.createIndex("myvalueIndexcate",["myvalue"],{unique:false,multiEntry:false}); var store2 = db.createObjectStore("copymystore", { keyPath: "timeStamp",autoIncrement:true}); //tuika store.createIndex("copymyvalueIndex",["copymyvalue","copymyvalue2","copymyvalue3","price"],{unique:false,multiEntry:false}); } openRequest.onsuccess = function(event) { db = event.target.result; } } else { window.alert("このブラウザではIndexed DataBase API は使えません。"); } function setValue(event) { var key = document.getElementById("newkey").value; var value = document.getElementById("newvalue").value; var value2 = document.getElementById("newvalue2").value; var transaction = db.transaction(["mystore"], "readwrite"); var store = transaction.objectStore("mystore"); var request = store.put({ mykey: key, myvalue: value, myvalue2: value2}); request.onsuccess = function (event) { document.getElementById("newkey").value = ""; document.getElementById("newvalue").value = ""; document.getElementById("newvalue2").value = ""; } } function getAll(event) { var result = document.getElementById("result"); result.innerHTML = ""; var transaction = db.transaction(["mystore"], "readwrite"); var store = transaction.objectStore("mystore"); var request = store.openCursor(); request.onsuccess = function (event) { if(event.target.result == null) { return; } var cursor = event.target.result; var data = cursor.value; result.innerHTML += "<table border='1'><td>"+"key:" + cursor.key + "</td>" +"<td>"+"value:" + data.myvalue + " value2:" + data.myvalue2 +"</td></table>"; cursor.continue(); } } function getAllcate(event) { var result = document.getElementById("result2"); result.innerHTML = ""; var transaction = db.transaction(["mystore"], "readwrite"); var store = transaction.objectStore("mystore"); var index = store.index("myvalueIndexcate"); var request = index.openCursor(null,"nextunique"); request.onsuccess = function (event) { if(event.target.result == null) { return; } var cursor = event.target.result; var data = cursor.value; var p = document.createElement("p"); p.classList.add("txt"); p.setAttribute("value", data.myvalue); p.innerHTML = "大分類: " + data.myvalue; p.addEventListener("click", function(event){ document.querySelector("#copy").value = event.target.getAttribute("value"); }); result.appendChild(p); cursor.continue(); } } function getAllcate2(event) { var value1 = document.getElementById("copy").value; var result = document.getElementById("result3"); result.innerHTML = ""; var transaction = db.transaction(["mystore"], "readwrite"); var store = transaction.objectStore("mystore"); var index = store.index("myvalueIndexcate"); var request = index.openCursor(value1,"nextunique"); request.onsuccess = function (event) { if(event.target.result == null) { return; } var cursor = event.target.result; var data = cursor.value; var p = document.createElement("p"); p.classList.add("txt"); p.setAttribute("value", data.myvalue2); p.innerHTML = "中分類: " + data.myvalue2; p.addEventListener("click", function(event){ document.querySelector("#copyvalue2").value = event.target.getAttribute("value"); }); result.appendChild(p); cursor.continue(); } } function getAllcate3(event) { var value1 = document.getElementById("copy").value; var value2 = document.getElementById("copyvalue2").value; var result = document.getElementById("result4"); result.innerHTML = ""; var transaction = db.transaction(["mystore"], "readwrite"); var store = transaction.objectStore("mystore"); var index = store.index("myvalueIndexcate"); var request = index.openCursor([value1,value2],"next"); request.onsuccess = function (event) { alert("ここまでは動作します"); if(event.target.result == null) { return; } var cursor = event.target.result; var data = cursor.value; var p = document.createElement("p"); p.classList.add("txt"); p.setAttribute("value", cursor.key); p.innerHTML = "小分類: " + cursor.key; p.addEventListener("click", function(event){ document.querySelector("#copyvalue3").value = event.target.getAttribute("value"); }); result.appendChild(p); cursor.continue(); } } window.addEventListener('DOMContentLoaded', function(e){ [].forEach.call(document.querySelectorAll('.txt'),function(x){ ["click","input"].forEach(function(y){x.addEventListener(y,function(e){ var v=(x.nodeName=="INPUT")?x.value:x.textContent; document.querySelector('#copy').value=v; }); }); }); }); function copysetValue(event){ var timestamp = new Date().getTime(); var copyvalue = document.getElementById("copy").value; var copyvalue2 = document.getElementById("copyvalue2").value; var copyvalue3 = document.getElementById("copyvalue3").value; var price = document.getElementById("price").value; var transaction = db.transaction(["copymystore"], "readwrite"); var store = transaction.objectStore("copymystore"); var request = store.put({timeStamp: timestamp, copymyvalue: copyvalue, copymyvalue2: copyvalue2 , copymyvalue3: copyvalue3,price: price}); request.onsuccess = function (event) { timestamp = new Date().getTime(); document.getElementById("copy").value = ""; document.getElementById("copyvalue2").value = ""; document.getElementById("copyvalue3").value = ""; document.getElementById("price").value = ""; } } function copygetAll(event) { var result = document.getElementById("result4"); result.innerHTML = ""; var transaction = db.transaction(["copymystore"], "readwrite"); var store = transaction.objectStore("copymystore"); var request = store.openCursor(); request.onsuccess = function (event) { if(event.target.result == null) { return; } var cursor = event.target.result; var data = cursor.value; result.innerHTML += "key:" + cursor.timestamp +" value:" + data.copymyvalue + " value2:" + data.copymyvalue2 +" value3:" + data.copymyvalue3 + " 値:" + data.price +"<br>"; cursor.continue(); } } </script> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問