<div></div>内で出てくる文字を.val()で表示したい

下記でテキスト入力欄に「123456」という文字が入力されます。

javascript
1
2<input type="text" id="value6" name="idpass" value=""/>
3<script>
4var Values = '123456';
5　　$("[name='idpass']").val(Values);      
6</script>
7

一方、下記のjavascriptでは
indexedDBから「result.innerHTML = event.target.result.myvalue + "";」
という形で拾ってきた文字 (=「'PASSW2'」に対する結果(keyValue)) が

<div id="result"></div>欄に記載されます。

javascript
1<script type="text/javascript" src="../js/jquery.js"></script>
2<script>
3
4var dbName = 'mydb';
5
6var openReq  = indexedDB.open(dbName);
7//　DB名を指定して接続。DBがなければ新規作成される。
8
9  openReq.onupgradeneeded = function(event){
10  //onupgradeneededは、DBのバージョン更新(DBの新規作成も含む)時のみ実行
11    console.log('db upgrade');
12  }
13  openReq.onsuccess = function(event){
14  //onupgradeneededの後に実行。更新がない場合はこれだけ実行
15    console.log('db open success');
16    var db = event.target.result;
17    // 接続を解除する
18    db.close();
19  }
20  openReq.onerror = function(event){
21  // 接続に失敗
22    console.log('db open error');
23  }
24
25var storeName  = 'mystore';
26
27var openReq = indexedDB.open(dbName, dbVersion);
28// オブジェクトストアの作成・削除はDBの更新時しかできないので、バージョンを指定して更新
29
30  openReq.onupgradeneeded = function(event){
31    var db = event.target.result;
32    db.createObjectStore('storeName', {keyPath : 'id'})
33  }
34
35var dbVersion;
36openReq.onsuccess = function(event){
37  var db = event.target.result;
38  dbVersion = db.version;
39}
40
41var keyValue = 'PASSW2';
42
43var openReq = indexedDB.open(dbName);
44
45  openReq.onsuccess = function(event){
46    var db = event.target.result;
47    var trans = db.transaction(storeName, 'readonly');
48    var store = trans.objectStore(storeName);
49    var getReq = store.get(keyValue);
50
51    getReq.onsuccess = function(event){
52
53 result.innerHTML = event.target.result.myvalue + "";
54
55    }
56  }
57</script>
58
59<BR>
60
61  <div id="result"></div>

やりたいこと。

のvalue欄に、<div id="result"></div>　で取得される文字を、そのまま入れたいというのが趣旨です。

【試したこと】

下記では入りませんでした。

javascript
1<input type="text" id="value6" name="idpass" value=""/>
2<script>
3    idpass.value = result.innerHTML;
4</script>

このような機会は多くあると思うのですが、WEBを検索してもなかなか出てきません。

方法についてご教示いただきたくお願いいたします。

行動規範の内容に同意します

回答4件

divの内容はjqueryならhtml()で取れると思います。

html
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <script
6  src="https://code.jquery.com/jquery-3.2.1.min.js"
7  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
8  crossorigin="anonymous"></script>
9</head>
10
11<body>
12    <input type="text" id="value6" name="idpass" value=""/>
13    <div id="result">testdiv</div>
14    
15    <button id="btn">test</button>
16</body>
17</html>
18<script>
19    $("#btn").click(function(){
20        $("#value6").val($("#result").html());
21    });
22</script>

ですがこのようにしてはいけないのですか？

$("[name='idpass']").val(event.target.result.myvalue + "");

投稿2018/01/03 10:00

sousuke

総合スコア3828

tajix_japan

2018/01/03 12:36

ありがとうございます。試してみましたが、 <input id="test2" type="button" value="取得" onclick="getValue()"/> のボタンを押して、keyValue　を抽出することができました。その後、testボタンを押して初めてkeyValueがテキストボックスに記載されました。 (2回のボタン押しが必要でした) 私が例示したjavascriptは、上のjavascriptでは特にボタンを押すことなしに　テキストボックス内に 123456　が表示されます下のjavascriptは　ボタンを押すことなしに dbから取得したパスワード部分(<div id="result"></div>)が表示されます。やりたいことは、ボタンを押すことなしに、テキストボックス内にパスワード部分(<div id="result"></div>) を表示することですので、ご教示いただいた方法ではやりたいことは出来ませんでした。お忙しい中、お時間をお取りいただきありがとうございました。

行動規範の内容に同意します

ベストアンサー

indexedDBの使用経験はないですが
div#result にテキスト表示されるのは非同期ではないでしょうか。

Javascript
1getReq.onsuccess = function(event) {
2  result.innerHTML = event.target.result.myvalue + ""; 
3
4  // ここで入れれば良い気がする
5  value6.value = result.innerHTML;
6}

イベントとして取得したいのであれば以下(jQuery使用)

Javascript
1$(function(){
2  $("#result").on('input', function() {
3    value6.value = this.innerHTML;
4  });
5});
6
7getReq.onsuccess = function(event) {
8  result.innerHTML = event.target.result.myvalue + ""; 
9
10  $("#result").trigger("input");
11  // value6.value = result.innerHTML; ここはいらなかった
12}

"input" は任意。試していないので参考まで

投稿2018/01/09 08:38

編集2018/01/11 00:00

退会済みユーザー

総合スコア0

tajix_japan

2018/01/10 11:26

ありがとうございます!! getReq.onsuccess = function(event) { result.innerHTML = event.target.result.myvalue + ""; // ここで入れれば良い気がする value6.value = result.innerHTML; } 上記で行けました!! View 200超えでも回答が来ず、もう完全にあきらめていたので感動しました。助かりました。深く御礼申し上げます!!

退会済みユーザー

2018/01/10 23:58

期待通りの動きになったのなら良かったです。引き続きファイトです！

x_x

2018/01/11 04:27

質問をした日の1/3だけでも2件の回答があったはずで、「回答が来ず」というのはさすがに失礼じゃないですかね？

tajix_japan

2018/01/11 11:33

大変失礼いたしました。

行動規範の内容に同意します

innerHTMLで変更している箇所がはっきりしているのでMutationObserverを持ち出すまでもありませんが。

JavaScript
1const mutationObserver = new MutationObserver((mutations, observer) => {
2  $('#value6').val($('#result').html());
3});
4mutationObserver.observe($('#result')[0], { childList: true });

MutationObserver
https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

投稿2018/01/09 07:20

x_x

総合スコア13749

html
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
6</head>
7
8<body>
9    <input type="text" id="value6" name="idpass" value=""/>
10    <div id="result">testdiv</div>
11    <script>
12        $("#btn").on('keyup change', function(){
13            $("#value6").val($("#result").html());
14        });
15    </script>
16</body>
17</html>