localStorageを使って保存した英単語データをクリックしたらランダムに表示したいのですが何も表示されず、エラーも出ません。
どこが間違っているのか教えていただけないでしょうか。
データを保存するところまではうまくいきました。
こちらがデータを入力して保存するときのコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> <script type="text/javascript"> $(function(){ $("#send").click(function(){ var en = $("#en").val(); var ja = $("#ja").val(); var data = { data1: en, data2: ja }; var length = localStorage.length; if(length == 0){ var num = 1; }else{ var num = length + 1; } localStorage.setItem(num, JSON.stringify(data)); }); $("#delete").click(function(){ localStorage.clear(); }); }); </script> </head> <body> <style type="text/css"> </style> <p>英語: <input type="text" id="en" ></p> <p>日本語: <input type="text" id="ja" ></p> <input type="submit" id="send" value="送信"> <input type="submit" id="delete" value="削除"> </body> </html>
こちらがデータを表示するときのコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="https://code.jquery.com/jquery-3.0.0.js"></script> <script> $(function(){ $("#start").click(function(){ var num = localStorage.length; var rund = Math.floor(Math.random() * num); var data1 = rund.data1; var data2 = rund.data2; $("#en").text(JSON.parse(localStorage.getItem(data1))); $("#ja").text(JSON.parse(localStorage.getItem(data2))); }); }); </script> <body> <style type="text/css"> #en { width: 400px; height: 150px; line-height: 150px; text-align: center; background-color: skyblue; color: white; float: left; } #ja { width: 400px; height: 150px; line-height: 150px; text-align: center; background-color: skyblue; color: white; float: left; margin-left: 4px; } </style> <div id="en"> sample </div> <div id="ja"> サンプル </div> <input type="submit" id="start" value="start"> </table> </body> </head> </html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。