修正版[HTML・JavaScript] モーダルにlocalstorageのデータを表示させたいです

Question

前提・実現したいこと

お世話になっております。
HTMLとJavaScriptを使って、アプリ開発をしております。

ボタンを押して、モーダルが表示された際にlocalstorageで保存されているデータを表示させたいのですが、
モーダルを出した後に表示させる方法が理解できておりません。

試したこと

・HTMLにあるonclickでモーダルが開くようになっている為、そこにlocalstorageに保存されているデータを表示させようとしましたが、失敗しました。

function hideModal(id) {
  var modal = document.getElementById(id);
  modal.hide();
};
function showModal(id) {
  var modal = document.getElementById(id);
  modal.show();
 //localstorageに保存されている内容
  var diaryData = [];
  diaryData = JSON.parse(localStorage.getItem('diaryData' + year + mon));
  var diary;
  if (Array.isArray(diaryData)) {
    diary = {
      'id': diaryData[thisId].id,
      'date': diaryData[thisId].date,
      'text': diaryData[thisId].text,
    }
  } else {
    console.log(diaryData.id);
    diary = {
      'id': diaryData.id,
      'date': diaryData.date,
      'text': diaryData.text,
    }
  }
  var date=new Date(diary.date);
  var html = '';
  html += '<h1 class="date">' + Number(date.getMonth()+1) + '月' + Number(date.getDate()) + '日' + '</h1>';
  html += '<div class="content">' + diary.text +'<br></br>' + '</div>';
  $('.wrapper').html(html);
}

<div class="wrapper">
</div>

<button id="text-button" onclick="showModal('resultDiagnosis')">Click</button>
	<!-- モーダル -->
	<ons-modal direction="up" animation="fade" id="resultDiagnosis">
		<div style="text-align: center; padding: 10px;">
			<div class="modal-bg" style="padding-top:0;">
        <label for="trigger_kiyaku" class="close_btn" onclick="hideModal('resultDiagnosis')">×</label>
				<p class="font" style="margin-top:0; background-color:#f5bcd3; color:#fff; padding:1em; font-weight:bold;">
					結果
				</p>
	</ons-modal>

Comments

[yambejp]

「Onsen UI」の利用を前提としているのでしたタグ付をしてください

[proday]

＞ yambejp 様
ご指摘ありがとうございます。
追加させていただきました。

Answer 1

<ons-modal>タグの中身がモーダルの表示領域なので、

<div class="wrapper">タグを<ons-modal>タグの入れ子になるように定義すれば良いのではないでしょうか。

Comments

[proday]

＞storm 様
大変遅くなり申し訳ございません。
ありがとうございます！
解決致しました。