質問編集履歴

3

タグを追加

2021/03/24 07:05

投稿

proday
proday

スコア4

test CHANGED
File without changes
test CHANGED
File without changes

2

・わかりやすく内容を修正

2021/03/24 07:05

投稿

proday
proday

スコア4

test CHANGED
@@ -1 +1 @@
1
- [HTML・JavaScript] モーダルにlocalstorageの内容出力させたいです
1
+ 修正版[HTML・JavaScript] モーダルにlocalstorageのデータ表示させたいです
test CHANGED
@@ -6,41 +6,39 @@
6
6
 
7
7
 
8
8
 
9
- ボタンを押して、モーダルが表示された際、前の画面でlocalstorage保存した内容出力させようとして
9
+ ボタンを押して、モーダルが表示された際localstorage保存されているデータ表示させのでが、
10
10
 
11
- (日付ごとに保存した内容)
12
-
13
- ※現在、モーダルではなく、モーダル開くボタンある画面読み込でいる形です
11
+ モーダルを出した後に表示させる方法理解きておりません。
14
12
 
15
13
 
16
14
 
17
15
  ### 試したこと
18
16
 
19
- ・モーダルを呼び出す処理データを入れている変数追加てみましたが、ダメでした。
17
+ HTMLにあるonclickでモーダルが開くようなっている為、そこにlocalstorageに保存されているデータ表示させようとしましたが、失敗ました。
20
18
 
21
19
 
22
20
 
23
21
  ```JavaScript
24
22
 
25
- $(document).ready(function () {
26
23
 
27
- let params = (new URL(document.location)).searchParams;
28
24
 
29
- var target = document.getElementById("back-button");
30
25
 
31
- var year = params.get('year');
32
26
 
33
- var mon = params.get('mon');
27
+ function hideModal(id) {
34
28
 
35
- var thisId = params.get('id');
29
+ var modal = document.getElementById(id);
36
30
 
37
- if (params.has('back')) {
31
+ modal.hide();
38
32
 
39
- target.href = '前の画面.html';
33
+ };
40
34
 
41
- } else {
35
+ function showModal(id) {
42
36
 
37
+ var modal = document.getElementById(id);
38
+
43
- }
39
+ modal.show();
40
+
41
+ //localstorageに保存されている内容
44
42
 
45
43
  var diaryData = [];
46
44
 
@@ -86,64 +84,6 @@
86
84
 
87
85
  $('.wrapper').html(html);
88
86
 
89
-
90
-
91
- function onLoad() {
92
-
93
- document.addEventListener("deviceready", onDeviceReady, false);
94
-
95
- }
96
-
97
-
98
-
99
- function onDeviceReady() {
100
-
101
- let params = (new URL(document.location)).searchParams;
102
-
103
- var year = params.get('year');
104
-
105
- var mon = params.get('mon');
106
-
107
- var thisId = params.get('id');
108
-
109
-
110
-
111
- loadImage(year, mon, thisId);
112
-
113
- }
114
-
115
- $(document).on('tap', '.images .img-container img', function () {
116
-
117
- var imgSrc = $(this).attr('src');
118
-
119
- $('.modalImage').attr('src', imgSrc)
120
-
121
- showModal('previewImage');
122
-
123
- });
124
-
125
- $(document).on('tap', '.modal__content', function () {
126
-
127
- hideModal('previewImage');
128
-
129
- });
130
-
131
- var hideModal = function (id) {
132
-
133
- var modal = document.getElementById(id);
134
-
135
- modal.hide();
136
-
137
- };
138
-
139
- function showModal(id) {
140
-
141
- var modal = document.getElementById(id);
142
-
143
- modal.show();
144
-
145
-  savedata(); //前の画面でデータを入れている変数
146
-
147
87
  }
148
88
 
149
89
 

1

詳細追加

2021/03/24 06:37

投稿

proday
proday

スコア4

test CHANGED
File without changes
test CHANGED
@@ -7,6 +7,8 @@
7
7
 
8
8
 
9
9
  ボタンを押して、モーダルが表示された際、前の画面でlocalstorage保存した内容を出力させようとしています。
10
+
11
+ (日付ごとに保存した内容)
10
12
 
11
13
  ※現在、モーダルではなく、モーダルを開くボタンがある画面で読み込んでいる形です。
12
14