●やりたいこと
『https://teratail.com/questions/193081』件の続きになります。
①1登録・更新にて、大分類・中分類・数値・日時を入力し設定ボタンを押し各値を設定(copysetValue関数)
②全表示ボタンを押し、処理結果に上記①にて設定した値の一覧を表示(copygetAll22関数)
③上記②の表示一覧より編集を押して、編集用フォームの作成
④作成したフォームに上記③で選択した値を表示(clickBtn5関数)
●質問内容
上記③・④が思うように動作しません
前回ご質問させて頂き、引数が『cursor.primaryKey』の場合は、動作したのですが、他の値(例えば『cursor.value.copymyvalue』)の場合は、ReterenceError:Can't find variable:☓ のエラーが表示されます。
また、innerHTMLに設定できるのはStringであるとのご指摘がありましたので、以下のようにinnerHTML→insertAdjacentHTMLへ変更したのですが、同結果が出ました。
つきましては、どこを修正すれば良いのでしょうか?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width" /> </head> <body> <h3>1登録・更新</h3> <form action="#"> <p>大分類:<input type="text" value="" name="copy" id="newcopyvalue"/></p> <p>中分類:<input type="text" value="" name="copy" id="newcopyvalue2"/></p> <p>数値:<input type="number" id="price"/></p> <p>日時:<input type="date" id="date" placeholder="date"/></p> <input type="button" value="設定" onclick="copysetValue()"/> <input type="button" value="全表示" onclick="copygetAll22()"/> <h3>処理結果 </h3> <div id="result"></div><hr> </form> </body> <script> var db; var indexedDB = window.indexedDB || window.mozIndexedDB || window.msIndexedDB; if (indexedDB) { // データベースを削除したい場合はコメントを外します。 //indexedDB.deleteDatabase("mydb"); var openRequest = indexedDB.open("mydb", 2.0); openRequest.onupgradeneeded = function(event) { // データベースのバージョンに変更があった場合(初めての場合もここを通ります。) db = event.target.result; var store = db.createObjectStore("copymystore", { keyPath:"timeStamp",autoIncrement:true}); store.createIndex("copymyvalueIndex",["copymyvalue","copymyvalue2"],{unique:false,multiEntry:false}); store.createIndex("copymyvalueIndex2",["date"],{unique:false,multiEntry:false}); } openRequest.onsuccess = function(event) { db = event.target.result; } } else { window.alert("このブラウザではIndexed DataBase API は使えません。"); } function copysetValue(event){ var timestamp = new Date().getTime(); var copyvalue = document.getElementById("newcopyvalue").value; var copyvalue2 = document.getElementById("newcopyvalue2").value; var price = document.getElementById("price").value; var date = new Date(document.getElementById("date").value); var transaction = db.transaction(["copymystore"], "readwrite"); var store = transaction.objectStore("copymystore"); var request = store.put({timeStamp:timestamp, copymyvalue:copyvalue, copymyvalue2:copyvalue2, price:price, date:date}); request.onsuccess = function (event) { timestamp = new Date().getTime(); document.getElementById("newcopyvalue").value = ""; document.getElementById("newcopyvalue2").value = ""; document.getElementById("price").value = ""; document.getElementById("date").value = ""; } } function copygetAll22(event) { var result = document.getElementById("result"); 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; var d1 = document.getElementById('result'); d1.insertAdjacentHTML('afterend', " key:" + cursor.primaryKey +" value:" + cursor.value.copymyvalue + " value2:" + data.copymyvalue2 +" 数値:" + data.price + " 日付:" +data.date +"<a id='" + cursor.primaryKey + "' onclick='deleteValue()' href='#'>[ 削除 ]</a>" + "<a onclick='clickBtn5(" + cursor.value.copymyvalue + " )' href='#'>[ 編集 ]</a>" +"<br>"); cursor.continue(); } } function clickBtn5(copymyvalue){ const res = document.getElementById("result"); for (let i=res.childNodes.length-1; i>=0; i--) {res.removeChild(res.childNodes[i]); } var obj = document.getElementById("result"); obj.id = "bbb"; // 要素の追加 if (!bbb.hasChildNodes()){ const input2 = document.createElement("input"); input2.setAttribute("type","text"); input2.setAttribute("value",copymyvalue); bbb.appendChild(input2); } } </script> </html>
回答1件
あなたの回答
tips
プレビュー