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

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

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

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

JavaScript

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

Q&A

解決済

1回答

992閲覧

javascriptでHTML内の文字を動的に変化した後の引数について

tetsu777

総合スコア39

HTML5

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

JavaScript

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

0グッド

0クリップ

投稿2019/06/11 04:38

編集2019/06/11 07:38

●やりたいこと
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>

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

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

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

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

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

x_x

2019/06/11 05:09

ここの処理は何のために入れているのでしょうか? var result = document.getElementById("result"); result.id = "aaa";
tetsu777

2019/06/11 07:16

ご質問ありがとうございます。 修正してから投稿すれば良かったのですが、上記コードには載せていない関数で使用するidです。 特に本件とは関係ありません。 よろしくお願いいたします。
x_x

2019/06/11 07:29

関係ないとは? 動作に支障をきたしているのですべて載せるか修正してください。
tetsu777

2019/06/11 07:38

大変申し訳ございません。 修正致しました。
guest

回答1

0

ベストアンサー

まず、勘違いしていると思われるのが insertAdjacentHTML で、innerHTML 同様文字列を取ります。変更しても同じことです。
https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML

そして文字列を組み立てるのですが、間違いやすいかと思います。実際に出来上がった HTML が正しいか確認しながら作ったほうがいいでしょう。

JavaScript

1'<a onclick="clickBtn5(\'' + cursor.value.copymyvalue + '\')" href="#">[ 編集 ]</a>'

文字列を組み立てるよりも、ノードを操作したほうが楽そうです。

投稿2019/06/11 07:54

x_x

総合スコア13749

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

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

x_x

2019/06/11 08:04

ユーザー入力由来の文字列で組み立てているため、エスケープ処理を入れないと場合によって破たんします。
tetsu777

2019/06/11 08:10

アドバイスありがとうございます。 エスケープ処理については、詳しく勉強した上で、後ほど追加したいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問