読み込んだQRコードをフォームに受け渡したい

「jsQR」とというスクリプトを用いて、HTML上にQRコードを読み込む機能を埋め込むことができました。

現在の状態はこちらになります。
https://tk19770914.xsrv.jp/qr/

内容的には、jsQRのサンプルページがもとになっています。
詳しい内容については、ソースコードを表示してご参照ください。

現在は、ソースコードにある
<div hidden><span id="outputData"></span></div>
の部分に読み込まれたQRコードの内容が表示されています。

現在の状態だと、QRコードが識別できている間だけテキストが表示され、QRコードから外れると <div id="outputMessage" >ＱＲコードを認識できません。</div>が表示されます。


今回の要望は、読み込まれたQRコードの内容を、その下の部分にあるフォームのテキスト入力欄に埋め込みたいと思っています。さらには、読み込み中のQRコードから外れても、フォームの値はそのまま埋め込まれ、再度（もしくは新しく）QRコードが読み込まれた場合、その値に上書きされるようにしたいと思っています。


なにぶん、Javascriptのコーディング経験がなく、既存のコードをアレンジすることもできません。

詳しい方、ご教授いただきたく、何卒宜しくお願い致します。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2023/05/18 12:27

こんにちは

ざっとしか見ていませんけれど・・・

if (code) {
　　・・・
　　outputData.innerText = code.data;　// データを表示
} else {
　　・・・
　　outputMessage.hidden = false;　//メッセージを表示
}

となっているようですので、データを表示した際にお好みの要素にも併せて記入するようにすれば宜しいでしょう。
　document.querySelector('#QRRead input').value = code.data;
とか。
UL要素にLIなどで追加してゆくようにすれば、複数分を順に記録するようなことも可能です。