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

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

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

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

Q&A

解決済

1回答

942閲覧

indexedDBで<div></div>以下が表示されない(上に被さる)

tajix_japan

総合スコア132

JavaScript

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

0グッド

0クリップ

投稿2018/01/01 09:15

編集2018/01/01 09:21

下記のようなindexedDBを組みました。

dbName = 'mydb';
storeName = 'mystore';
keyValue = 'MYID';

として接続し、MYIDに関しては「YAMADA」という文字をすでにDB内に登録済みです。

従い、下記のホームページを表示すると

<br>上部表示
<br>

<div id="result"/> <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

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

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

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

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

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

guest

回答1

0

ベストアンサー

全体は見ていませんが、とりあえず <div id="result"/> このように省略できません。<div id="result"></div> こう書きましょう。

投稿2018/01/01 10:04

kei344

総合スコア69364

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

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

tajix_japan

2018/01/01 10:07

ありがとうございます。、 出来ました。YAMADAまで表示されていたのでまったく疑問を持ちませんでした。 大変助かりました。深く御礼申し上げます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問