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

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

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

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

JavaScript

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

Q&A

解決済

1回答

1284閲覧

javascriptの引数について

tetsu777

総合スコア39

HTML5

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

JavaScript

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

0グッド

1クリップ

投稿2019/06/04 05:59

●やりたいこと
①1登録・更新にて、大分類・中分類・数値・日時を入力し設定ボタンを押し各値を設定(copysetValue関数)
②全表示ボタンを押し、処理結果に上記①にて設定した値の一覧を表示(copygetAll22関数)
③上記②の表示一覧より編集を押して、編集用フォームの作成
④作成したフォームに上記③で選択した値を表示(clickBtn5関数)

●質問内容
上記③・④が思うように動作しません。
③でcopygetAll22関数内の "<a onclick='clickBtn5(" + cursor + ")' href='#'>[ 編集 ]</a>" 中の" + cursor + "を入力しなければ③までは動作しますが、『Uncaught SyntaxError: Unexpected identifier』エラーが発生します。
どこを修正すれば良いのでしょうか?

<!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"); result.id = "aaa"; aaa.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.primaryKey +" value:" + data.copymyvalue + " value2:" + data.copymyvalue2 +" 数値:" + data.price + " 日付:" +data.date + "<a onclick='clickBtn5(" + cursor + ")' href='#'>[ 編集 ]</a>" +"<br>"; cursor.continue(); } } function clickBtn5(cursor){ const res = document.getElementById("aaa"); for (let i=res.childNodes.length-1; i>=0; i--) {res.removeChild(res.childNodes[i]); } var obj = document.getElementById("aaa"); obj.id = "bbb"; // 要素の追加 if (!bbb.hasChildNodes()){ const input1 = document.createElement("input"); input1.setAttribute("type","text"); input1.setAttribute("value",cursor.primaryKey); bbb.appendChild(input1); } } </script> </html>

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

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

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

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

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

guest

回答1

0

ベストアンサー

innerHTMLに設定できるのはStringであるため、エラーが発生しているものと思います。
(cursorが文字列として解決できない)

動くかどうかわかりませんが、現在の形をそのまま使うのであれば下記のような形にしてはどうでしょうか。

html

1result.innerHTML += " key:" + cursor.primaryKey +" value:" + data.copymyvalue + " value2:" + data.copymyvalue2 +" 数値:" + data.price + " 日付:" +data.date + "<a onclick='clickBtn5(" + cursor.primaryKey + ")' href='#'>[ 編集 ]</a>" +"<br>";

Javascript

1function clickBtn5(primaryKey ){ 2~中略~ 3//input1.setAttribute("value",cursor.primaryKey); 4input1.setAttribute("value",primaryKey); 5~~ 6}

投稿2019/06/04 06:30

mar-kn

総合スコア306

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

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

tetsu777

2019/06/04 06:40

早速のご回答ありがとうございます。教えていただいた通り修正したら動作しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問