###前提・実現したいこと
以下のようにJSON形式で登録した情報を取得し、戻るボタンを押すと
一つ前のオブジェクトを取得できるようにしたいです。
一つ後のオブジェクトは取得できました。
obj[x] = { "english": text1, "japanese": text2, "info": text3 };
ご教示いただきたいです。
どうぞよろしくお願い致します。
###発生している問題・エラーメッセージ
Uncaught TypeError: Cannot read property 'english' of undefined at back となってしまいます。
###該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>localStorageのサンプル</title> 6 <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> 7</head> 8<body> 9<div id="form"> 10<textarea id="text1" name="japanese" cols="40" rows="5"></textarea> 11<!-- <input id="text1" type="text" size="50"> --> 12 <input id="text2" type="text" size="50"> 13 <input id="text3" type="text" size="50"> 14</div> 15 16 17<input type="button" onClick="saveData()" value="データ保存"> 18<input type="button" onClick="readData()" onclick="addlist()" value="データ読込"> 19<input type="button" onClick="delData()" value="データ削除"> 20 21 22 <p id="exp_Q"></p> 23 <p id="exp_A"></p> 24 <p id="exp_I"></p> 25 26 <p>単語:</p> 27 <p id="list_Q">ex</p> 28 <p id="list_A">ex</p> 29 <p id="list_I">ex</p> 30<button onclick="back()">戻る</button> 31 <button onclick="next()">進む</button> 32 33<script> 34var obj = {}; 35var x = 1; 36function saveData() { 37 // $("#text1, #text2, #text3").empty(); 38 var text1 = $("#text1").val(); 39 var text2 = $("#text2").val(); 40 var text3 = $("#text3").val(); 41 42 43 obj[x] = { 44 "english": text1, 45 "japanese": text2, 46 "info": text3 47 }; 48 49 console.log(obj); 50 51 x = x + 1; 52 localStorage.setItem("data", JSON.stringify(obj)); 53 console.log( localStorage.getItem("data") ); 54 addlist(); 55} 56 57 58 59 60 61var k = 0; 62// function back() { 63// var object = JSON.parse(localStorage.getItem("data")); 64// var keys = Object.keys(object); 65// $('#list_Q').text(object[keys[k]]['english']); 66// $('#list_A').text(object[keys[k]]['japanese']); 67// $('#list_I').text(object[keys[k]]['info']); 68// k--; 69// } 70 71 // var k = 0; 72function next() { 73 var object = JSON.parse(localStorage.getItem("data")); 74 var keys = Object.keys(object); 75 $('#list_Q').text(object[keys[k]]['english']); 76 $('#list_A').text(object[keys[k]]['japanese']); 77 $('#list_I').text(object[keys[k]]['info']); 78 console.log(object[keys[k]]['english']) 79 k++; 80} 81 82var iMax = 0; 83 function list(){ 84 var object = JSON.parse(localStorage.getItem("data")); 85 var keys = Object.keys(object); 86 var a = ""; 87 for( var i=0, l=keys.length; i<l; i++) { 88 a += "<tr>\n"; 89 a += "<td>"; 90 a += keys[i]; 91 a += "</td>\n"; 92 93 for (j = 0; j < Object.keys(object[keys[i]]).length; j++) { 94 a += "<td>"; 95 a += object[keys[i]][Object.keys(object[keys[i]])[j]]; 96 a += "</td>\n"; 97 } 98 a += "</tr>\n"; 99 iMax = i; 100 } 101 $("#listbox").append(a); 102 } 103 104 var i = 0; 105 function addlist(){ 106 var object = JSON.parse(localStorage.getItem("data")); 107 var keys = Object.keys(object); 108 var a = ""; 109 a += "<tr>\n"; 110 a += "<td>"; 111 // if(!keys.length + 1 == i){ 112 // a = keys.length + keys[i] 113 // }else{ 114 // a += keys[i]; 115 // }; 116 a += keys[i]; 117 a += "</td>\n"; 118 a += "<td>"; 119 a += object[keys[i]]['english']; 120 a += "</td>\n"; 121 a += "<td>"; 122 a += object[keys[i]]['japanese']; 123 a += "</td>\n"; 124 a += "<td>"; 125 a += object[keys[i]]['info']; 126 a += "</td>\n"; 127 a += "</tr>\n"; 128 $("#listbox").append(a); 129 i++; 130 131 } 132 133 function count(){ 134 135 } 136 137</script>
###試したこと
var k = 0;
function back() {
var object = JSON.parse(localStorage.getItem("data"));
var keys = Object.keys(object);
$('#list_Q').text(object[keys[k]]['english']);
$('#list_A').text(object[keys[k]]['japanese']);
$('#list_I').text(object[keys[k]]['info']);
k--;
}
として、グローバル変数kを0として、現在の値からクリックする度にプラス、マイナスと
できるように書いてみましたが、値の取得できませんでした。
###補足情報(言語/FW/ツール等のバージョンなど)
回答1件
あなたの回答
tips
プレビュー