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

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

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

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

Q&A

解決済

2回答

1953閲覧

indexedDBで複数キーの同時登録

tajix_japan

総合スコア132

JavaScript

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

0グッド

0クリップ

投稿2017/12/31 05:12

編集2017/12/31 05:17

indexedDBで複数キーの同時登録

下記のindexedDBは、MYID,PASSW,MYID2,PASSW2,MAILADD の5項目をindexedDBに登録、更新することができます。

javascript

1 2<!DOCTYPE html> 3<html> 4<head> 5 <meta charset="utf-8"/> 6 <title>Indexed DataBase</title> 7</head> 8<body> 9 <h3>登録・更新</h3> 10 キー:<input type="text" id="newkey" value="MYID" /> 11 バリュー:<input type="newkey" id="newvalue" /> 12 <input type="button" value="MYID設定" onclick="setValue()"/> 13 14<BR> 15 16 キー:<input type="text" id="newkey2" value="PASSW" /> 17 バリュー:<input type="text" id="newvalue2" /> 18 <input type="button" value="PASSW設定" onclick="setValue2()"/> 19<BR> 20 キー:<input type="text" id="newkey3" value="MYID2" /> 21 バリュー:<input type="text" id="newvalue3" /> 22 <input type="button" value="MYID2設定" onclick="setValue3()"/> 23 24<BR> 25 キー:<input type="text" id="newkey4" value="PASSW2" /> 26 バリュー:<input type="text" id="newvalue4" /> 27 <input type="button" value="PASSW2設定" onclick="setValue4()"/> 28 29 30<BR> 31 キー:<input type="text" id="newkey5" value="MAILADD" /> 32 バリュー:<input type="text" id="newvalue5" /> 33 <input type="button" value="MAILADD設定" onclick="setValue5()"/> 34 35 36 <h3>参照</h3> 37 取得したい値のキー<input type="text" id="selectkey" /> 38 <input type="button" value="取得" onclick="getValue()"/> 39 <input type="button" value="全取得" onclick="getAll()"/> 40 <input type="button" value="件数表示" onclick="getCount()"/> 41 <hr /> 42 43 44 <h3>処理結果</h3> 45 <div id="result"/> 46</body> 47<script> 48 var db; 49 var indexedDB = window.indexedDB || window.mozIndexedDB || window.msIndexedDB; 50 if (indexedDB) { 51 // データベースを削除したい場合はコメントを外します。 52 //indexedDB.deleteDatabase("mydb"); 53 var openRequest = indexedDB.open("mydb", 1.0); 54 55 openRequest.onupgradeneeded = function(event) { 56 // データベースのバージョンに変更があった場合(初めての場合もここを通ります。) 57 db = event.target.result; 58 var store = db.createObjectStore("mystore", { keyPath: "mykey"}); 59 store.createIndex("myvalueIndex", "myvalue"); 60 } 61 62 openRequest.onsuccess = function(event) { 63 db = event.target.result; 64 } 65 } else { 66 window.alert("このブラウザではIndexed DataBase API は使えません。"); 67 } 68 69 function setValue(event) { 70 var key = document.getElementById("newkey").value; 71 var value = Number(document.getElementById("newvalue").value); 72 73 var transaction = db.transaction(["mystore"], "readwrite"); 74 var store = transaction.objectStore("mystore"); 75 76 var request = store.put({ mykey: key, myvalue: value}); 77 request.onsuccess = function (event) { 78 document.getElementById("newkey").value = ""; 79 document.getElementById("newvalue").value = ""; 80 } 81 } 82 83 84 function setValue2(event) { 85 var key2 = document.getElementById("newkey2").value; 86 var value2 = Number(document.getElementById("newvalue2").value); 87 88 var transaction = db.transaction(["mystore"], "readwrite"); 89 var store = transaction.objectStore("mystore"); 90 91 var request = store.put({ mykey: key2, myvalue: value2}); 92 request.onsuccess = function (event) { 93 document.getElementById("newkey2").value = ""; 94 document.getElementById("newvalue2").value = ""; 95 } 96 } 97 98 99 function setValue3(event) { 100 var key3 = document.getElementById("newkey3").value; 101 var value3 = Number(document.getElementById("newvalue3").value); 102 103 var transaction = db.transaction(["mystore"], "readwrite"); 104 var store = transaction.objectStore("mystore"); 105 106 var request = store.put({ mykey: key3, myvalue: value3}); 107 request.onsuccess = function (event) { 108 document.getElementById("newkey3").value = ""; 109 document.getElementById("newvalue3").value = ""; 110 } 111 } 112 113 114 function setValue4(event) { 115 var key4 = document.getElementById("newkey4").value; 116 var value4 = Number(document.getElementById("newvalue4").value); 117 118 var transaction = db.transaction(["mystore"], "readwrite"); 119 var store = transaction.objectStore("mystore"); 120 121 var request = store.put({ mykey: key4, myvalue: value4}); 122 request.onsuccess = function (event) { 123 document.getElementById("newkey4").value = ""; 124 document.getElementById("newvalue4").value = ""; 125 } 126 } 127 128 129 function setValue5(event) { 130 var key5 = document.getElementById("newkey5").value; 131 var value5 = Number(document.getElementById("newvalue5").value); 132 133 var transaction = db.transaction(["mystore"], "readwrite"); 134 var store = transaction.objectStore("mystore"); 135 136 var request = store.put({ mykey: key5, myvalue: value5}); 137 request.onsuccess = function (event) { 138 document.getElementById("newkey5").value = ""; 139 document.getElementById("newvalue5").value = ""; 140 } 141 } 142 143 144 145 146 147 148 149 150 function getValue(event) { 151 var key = document.getElementById("selectkey").value; 152 var result = document.getElementById("result"); 153 result.innerHTML = ""; 154 155 var transaction = db.transaction(["mystore"], "readwrite"); 156 var store = transaction.objectStore("mystore"); 157 158 var request = store.get(key); 159 request.onsuccess = function (event) { 160 161 if (event.target.result === undefined) { 162 result.innerHTML = "指定したキーは存在しません。"; 163 } else { 164 result.innerHTML = event.target.result.myvalue + "<br/>"; 165 } 166 } 167 } 168 169 function getAll(event) { 170 171 var result = document.getElementById("result"); 172 result.innerHTML = ""; 173 174 var transaction = db.transaction(["mystore"], "readwrite"); 175 var store = transaction.objectStore("mystore"); 176 var request = store.openCursor(); 177 178 request.onsuccess = function (event) { 179 180 if(event.target.result == null) { 181 return; 182 } 183 184 var cursor = event.target.result; 185 var data = cursor.value; 186 result.innerHTML += "key:" + cursor.key + " value:" + data.myvalue + "<br/>"; 187 188 cursor.continue(); 189 } 190 } 191 192 function getCount(event) { 193 194 var result = document.getElementById("result"); 195 result.innerHTML = ""; 196 197 var transaction = db.transaction(["mystore"], "readwrite"); 198 var store = transaction.objectStore("mystore"); 199 var request = store.count(); 200 201 request.onsuccess = function (event) { 202 result.innerHTML = event.target.result + "件"; 203 } 204 } 205 206 207 208 function getKey(event) { 209 210 var value1 = Number(document.getElementById("selectValue1").value); 211 var value2 = Number(document.getElementById("selectValue2").value); 212 213 var result = document.getElementById("result"); 214 result.innerHTML = ""; 215 216 var transaction = db.transaction(["mystore"], "readwrite"); 217 var store = transaction.objectStore("mystore"); 218 var index = store.index("myvalueIndex"); 219 220 var range = IDBKeyRange.bound(value1, value2); 221 var request = index.openCursor(range); 222 223 request.onsuccess = function (event) { 224 225 if(event.target.result == null) { 226 return; 227 } 228 229 var cursor = event.target.result; 230 var data = cursor.value; 231 result.innerHTML += "value:" + data.myvalue + " key:" + data.mykey + "<br/>"; 232 233 cursor.continue(); 234 } 235 } 236 237</script> 238</html> 239 240 241

困っていること。

この5項目登録のためには、

<input type="button" value="MYID設定" onclick="setValue()"/> <input type="button" value="PASSW設定" onclick="setValue2()"/> <input type="button" value="MYID2設定" onclick="setValue3()"/> <input type="button" value="PASSW2設定" onclick="setValue4()"/> <input type="button" value="MAILADD設定" onclick="setValue5()"/>

の5つのボタンをひとつづつ押していって初めて全ての登録が完了します。

この5回の登録ボタンを1回で済ませたいというのが趣旨となります。
(下記のような全設定ボタンを新たに作り1回で登録を済ませたい)

<input type="button" value="全設定" onclick="setValue100()"/>

対策案

javascriptの中に、
setValue100(event)
を新たに作ります。

javascript

1 2 function setValue100(event) { 3 var key = document.getElementById("newkey").value; 4 var value = Number(document.getElementById("newvalue").value); 5 var key2 = document.getElementById("newkey2").value; 6 var value2 = Number(document.getElementById("newvalue2").value); 7 var key3 = document.getElementById("newkey3").value; 8 var value3 = Number(document.getElementById("newvalue3").value); 9 var key4 = document.getElementById("newkey4").value; 10 var value4 = Number(document.getElementById("newvalue4").value); 11 var key5 = document.getElementById("newkey5").value; 12 var value5 = Number(document.getElementById("newvalue5").value); 13 14 var transaction = db.transaction(["mystore"], "readwrite"); 15 var store = transaction.objectStore("mystore"); 16 17 var request = store.put({ mykey: key, myvalue: value}); 18 request.onsuccess = function (event) { 19 document.getElementById("newkey").value = ""; 20 document.getElementById("newvalue").value = ""; 21 document.getElementById("newkey2").value = ""; 22 document.getElementById("newvalue2").value = ""; 23 document.getElementById("newkey3").value = ""; 24 document.getElementById("newvalue3").value = ""; 25 document.getElementById("newkey4").value = ""; 26 document.getElementById("newvalue4").value = ""; 27 document.getElementById("newkey5").value = ""; 28 document.getElementById("newvalue5").value = ""; 29 30 } 31 } 32

上記のようなsetValue100(event)を新たに作った時に、

var request = store.put({ mykey: key, myvalue: value});

をどう書き換えるかがカギとなるのだと思いますが、書き方がわかりません。

失敗例
その1
var request = store.put({ mykey: key,key2,key3,key4,key5, myvalue: value,value2,value3,value4,value5});

その2
var request = store.put({ mykey: key, myvalue: value},{ mykey: key2, myvalue: value2},{ mykey: key3, myvalue: value3},{ mykey: key4, myvalue: value4},{ mykey: key5, myvalue: value5});

上記の失敗例を試したのですが、動きません。

どうすればいいかご教示いただきたくお願いいたします。

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

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

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

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

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

guest

回答2

0

store.put()を登録する分実行する形になります

js

1store.put({mykey: key, value: value}); 2store.put({mykey: key2, value: value2}); 3store.put({mykey: key3, value: value3}); 4store.put({mykey: key4, value: value4}); 5store.put({mykey: key5, value: value5});

(トランザクションは関数が終わるまで有効です)

投稿2017/12/31 06:19

turbgraphics200

総合スコア4267

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

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

tajix_japan

2017/12/31 07:00

ありがとうございます。 コンソールでもエラーにはならないのですが、 なぜか key:MAILADD value:undefined key:MYID value:undefined key:MYID2 value:undefined key:PASSW value:undefined key:PASSW2 value:undefined になってしまいました。 もう少し、弄ればうまく行けそうですが、先に回答いただきました kei344様の方法でうまく動くことがわかりましたので、今回は kei344様の方式を使わさせていただきます。 お時間をお取りいただき本当にありがとうございました。 深く御礼申し上げます。
guest

0

ベストアンサー

ざっと見ただけですが、setValue1からsetValue5は引数を何も利用していないので、下記のようにすれば全部のボタンを押したことと同じになりますよ。

js

1function setValue100() { 2 setValue1(); 3 setValue2(); 4 setValue3(); 5 setValue4(); 6 setValue5(); 7}

投稿2017/12/31 05:38

kei344

総合スコア69364

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

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

tajix_japan

2017/12/31 06:05

ありがとうございます 下記の2つのjavascriptを、私のscriptの中(最下部やsetValue(event)の直前 )やスクリプト外部(上、または下)に設定して試してみたのですが、うまくいきませんでした。 大変申し訳ございませんが、具体的にどのあたりに記載すればいいかご教示いただけますと幸いです。 よろしくお願いいたします。 試してみたもの +++++++++++++++++++++++ function setValue100() { setValue1(); setValue2(); setValue3(); setValue4(); setValue5(); } ++++++++++++++++++++++++ function setValue100(event) { setValue1(); setValue2(); setValue3(); setValue4(); setValue5(); } ++++++++++++++++++++++++
tajix_japan

2017/12/31 06:56

ありがとうございます。 setValue1(); が間違いでした。 setValue(); が正解です。 setValue(); にしたところ、うまく動きました。 ありがとうございました。深く御礼申し上げます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問