下記のようなindexedDBを組みました。
dbName = 'mydb';
storeName = 'mystore';
keyValue = 'MYID';
として接続し、MYIDに関しては「YAMADA」という文字をすでにDB内に登録済みです。
従い、下記のホームページを表示すると
<br>上部表示
<br>
の部分がブラウザ上に表示される形になりますので、ブラウザで見ると
上部表示
YAMADA
下部表示
という形で表示されるはずです。
【困っていること】
ところが、実際には
上部表示
下部表示
という表示を一瞬見せた後
上部表示
YAMADA
という表示に代わってしまいます。(YMAMDAが下部表示の文字の上に被さります)
<div id="result"/> で表示される YAMADA がそれ以下に記載された文字に全て被さってしまい表示されない状況です。
<div id="result"/>以下全てが表示されません。どこが問題なのかご教示いただけませんでしょうか?
よろしくお願いいたします。
javascript
1 2 3<!DOCTYPE html> 4<html> 5<head> 6 <meta charset="utf-8"/> 7 <title>Indexed DataBase APIサンプル</title> 8<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 9</head> 10<body> 11 12<script> 13var dbName = 'mydb'; 14var openReq = indexedDB.open(dbName); 15// DB名を指定して接続。DBがなければ新規作成される。 16 openReq.onupgradeneeded = function(event){ 17 //onupgradeneededは、DBのバージョン更新(DBの新規作成も含む)時のみ実行 18 console.log('db upgrade'); 19 } 20 openReq.onsuccess = function(event){ 21 //onupgradeneededの後に実行。更新がない場合はこれだけ実行 22 console.log('db open success'); 23 var db = event.target.result; 24 // 接続を解除する 25 db.close(); 26 } 27 openReq.onerror = function(event){ 28 // 接続に失敗 29 console.log('db open error'); 30 } 31var storeName = 'mystore'; 32var keyValue = 'MYID'; 33var openReq = indexedDB.open(dbName); 34 openReq.onsuccess = function(event){ 35 var db = event.target.result; 36 var trans = db.transaction(storeName, 'readonly'); 37 var store = trans.objectStore(storeName); 38 var getReq = store.get(keyValue); 39 getReq.onsuccess = function(event){ 40 if (event.target.result === undefined) { 41 result.innerHTML = "指定したキーは存在しません。"; 42 } else { 43 result.innerHTML = event.target.result.myvalue + "<br/>"; 44 } 45 46 } 47 } 48</script> 49 50 51 52<BR>上部表示 53<BR> 54<div id="result"/> 55<BR> 56下部表示 57<BR> 58 59</body> 60</html> 61 62
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/01 10:07