質問編集履歴

3

タグ付け

2017/02/15 18:47

投稿

tai_chi
tai_chi

スコア15

test CHANGED
File without changes
test CHANGED
File without changes

2

コード編集

2017/02/15 18:47

投稿

tai_chi
tai_chi

スコア15

test CHANGED
File without changes
test CHANGED
File without changes

1

コードを追記致しました。 よろしくお願いいたします。

2017/02/15 18:45

投稿

tai_chi
tai_chi

スコア15

test CHANGED
File without changes
test CHANGED
@@ -44,19 +44,287 @@
44
44
 
45
45
  ```html
46
46
 
47
+ <!DOCTYPE html>
48
+
49
+ <html lang="ja">
50
+
51
+ <head>
52
+
53
+ <meta charset="utf-8">
54
+
55
+ <title>localStorageのサンプル</title>
56
+
57
+ <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
58
+
59
+ </head>
60
+
61
+ <body>
62
+
63
+ <div id="form">
64
+
65
+ <textarea id="text1" name="japanese" cols="40" rows="5"></textarea>
66
+
67
+ <!-- <input id="text1" type="text" size="50"> -->
68
+
69
+ <input id="text2" type="text" size="50">
70
+
71
+ <input id="text3" type="text" size="50">
72
+
73
+ </div>
74
+
75
+
76
+
77
+
78
+
79
+ <input type="button" onClick="saveData()" value="データ保存">
80
+
81
+ <input type="button" onClick="readData()" onclick="addlist()" value="データ読込">
82
+
83
+ <input type="button" onClick="delData()" value="データ削除">
84
+
85
+
86
+
87
+
88
+
89
+ <p id="exp_Q"></p>
90
+
91
+ <p id="exp_A"></p>
92
+
93
+ <p id="exp_I"></p>
94
+
95
+
96
+
97
+ <p>単語:</p>
98
+
99
+ <p id="list_Q">ex</p>
100
+
101
+ <p id="list_A">ex</p>
102
+
103
+ <p id="list_I">ex</p>
104
+
47
- <button id="back">戻る</button>
105
+ <button onclick="back()">戻る</button>
48
-
106
+
49
- <button id="next">進む</button>
107
+ <button onclick="next()">進む</button>
50
108
 
51
109
 
52
110
 
53
111
  <script>
54
112
 
55
-
113
+ var obj = {};
114
+
56
-
115
+ var x = 1;
116
+
57
-
117
+ function saveData() {
118
+
58
-
119
+ // $("#text1, #text2, #text3").empty();
120
+
121
+ var text1 = $("#text1").val();
122
+
123
+ var text2 = $("#text2").val();
124
+
125
+ var text3 = $("#text3").val();
126
+
127
+
128
+
129
+
130
+
131
+ obj[x] = {
132
+
133
+ "english": text1,
134
+
135
+ "japanese": text2,
136
+
137
+ "info": text3
138
+
139
+ };
140
+
141
+
142
+
143
+ console.log(obj);
144
+
145
+
146
+
147
+ x = x + 1;
148
+
149
+ localStorage.setItem("data", JSON.stringify(obj));
150
+
151
+ console.log( localStorage.getItem("data") );
152
+
153
+ addlist();
154
+
155
+ }
156
+
157
+
158
+
159
+
160
+
161
+
162
+
163
+
164
+
165
+
166
+
167
+ var k = 0;
168
+
169
+ // function back() {
170
+
171
+ // var object = JSON.parse(localStorage.getItem("data"));
172
+
173
+ // var keys = Object.keys(object);
174
+
175
+ // $('#list_Q').text(object[keys[k]]['english']);
176
+
177
+ // $('#list_A').text(object[keys[k]]['japanese']);
178
+
179
+ // $('#list_I').text(object[keys[k]]['info']);
180
+
181
+ // k--;
182
+
183
+ // }
184
+
185
+
186
+
187
+ // var k = 0;
188
+
189
+ function next() {
190
+
191
+ var object = JSON.parse(localStorage.getItem("data"));
192
+
193
+ var keys = Object.keys(object);
194
+
195
+ $('#list_Q').text(object[keys[k]]['english']);
196
+
197
+ $('#list_A').text(object[keys[k]]['japanese']);
198
+
199
+ $('#list_I').text(object[keys[k]]['info']);
200
+
201
+ console.log(object[keys[k]]['english'])
202
+
203
+ k++;
204
+
205
+ }
206
+
207
+
208
+
209
+ var iMax = 0;
210
+
211
+ function list(){
212
+
213
+ var object = JSON.parse(localStorage.getItem("data"));
214
+
215
+ var keys = Object.keys(object);
216
+
217
+ var a = "";
218
+
219
+ for( var i=0, l=keys.length; i<l; i++) {
220
+
221
+ a += "<tr>\n";
222
+
223
+ a += "<td>";
224
+
225
+ a += keys[i];
226
+
227
+ a += "</td>\n";
228
+
229
+
230
+
231
+ for (j = 0; j < Object.keys(object[keys[i]]).length; j++) {
232
+
233
+ a += "<td>";
234
+
235
+ a += object[keys[i]][Object.keys(object[keys[i]])[j]];
236
+
237
+ a += "</td>\n";
238
+
239
+ }
240
+
241
+ a += "</tr>\n";
242
+
243
+ iMax = i;
244
+
245
+ }
246
+
247
+ $("#listbox").append(a);
248
+
249
+ }
250
+
251
+
252
+
59
- var i = 0;
253
+ var i = 0;
254
+
255
+ function addlist(){
256
+
257
+ var object = JSON.parse(localStorage.getItem("data"));
258
+
259
+ var keys = Object.keys(object);
260
+
261
+ var a = "";
262
+
263
+ a += "<tr>\n";
264
+
265
+ a += "<td>";
266
+
267
+ // if(!keys.length + 1 == i){
268
+
269
+ // a = keys.length + keys[i]
270
+
271
+ // }else{
272
+
273
+ // a += keys[i];
274
+
275
+ // };
276
+
277
+ a += keys[i];
278
+
279
+ a += "</td>\n";
280
+
281
+ a += "<td>";
282
+
283
+ a += object[keys[i]]['english'];
284
+
285
+ a += "</td>\n";
286
+
287
+ a += "<td>";
288
+
289
+ a += object[keys[i]]['japanese'];
290
+
291
+ a += "</td>\n";
292
+
293
+ a += "<td>";
294
+
295
+ a += object[keys[i]]['info'];
296
+
297
+ a += "</td>\n";
298
+
299
+ a += "</tr>\n";
300
+
301
+ $("#listbox").append(a);
302
+
303
+ i++;
304
+
305
+
306
+
307
+ }
308
+
309
+
310
+
311
+ function count(){
312
+
313
+
314
+
315
+ }
316
+
317
+
318
+
319
+ </script>
320
+
321
+ ```
322
+
323
+
324
+
325
+ ###試したこと
326
+
327
+ var k = 0;
60
328
 
61
329
  function back() {
62
330
 
@@ -64,66 +332,16 @@
64
332
 
65
333
  var keys = Object.keys(object);
66
334
 
67
- $('#list_Q').text(object[keys[i]]['english']);
335
+ $('#list_Q').text(object[keys[k]]['english']);
68
-
336
+
69
- $('#list_A').text(object[keys[i]]['japanese']);
337
+ $('#list_A').text(object[keys[k]]['japanese']);
70
-
338
+
71
- $('#list_I').text(object[keys[i]]['info']);
339
+ $('#list_I').text(object[keys[k]]['info']);
72
-
73
- console.log(object[keys[i]]['english']);
340
+
74
-
75
- i--;
341
+ k--;
76
342
 
77
343
  }
78
344
 
79
-
80
-
81
- var k = 0;
82
-
83
- function next() {
84
-
85
- var object = JSON.parse(localStorage.getItem("data"));
86
-
87
- var keys = Object.keys(object);
88
-
89
- $('#list_Q').text(object[keys[k]]['english']);
90
-
91
- $('#list_A').text(object[keys[k]]['japanese']);
92
-
93
- $('#list_I').text(object[keys[k]]['info']);
94
-
95
- console.log(object[keys[k]]['english'])
96
-
97
- k++;
98
-
99
- }
100
-
101
- </script>
102
-
103
- ```
104
-
105
-
106
-
107
- ###試したこと
108
-
109
- var k = 0;
110
-
111
- function back() {
112
-
113
- var object = JSON.parse(localStorage.getItem("data"));
114
-
115
- var keys = Object.keys(object);
116
-
117
- $('#list_Q').text(object[keys[k]]['english']);
118
-
119
- $('#list_A').text(object[keys[k]]['japanese']);
120
-
121
- $('#list_I').text(object[keys[k]]['info']);
122
-
123
- k--;
124
-
125
- }
126
-
127
345
  として、グローバル変数kを0として、現在の値からクリックする度にプラス、マイナスと
128
346
 
129
347
  できるように書いてみましたが、値の取得できませんでした。