HTML、CSSを学んで約3週間、javascriptを最近始めた初心者です。
ローカルストレージを利用してメモ帳を作成しています。
保存ボタンを押さずに、テキスト入力毎に自動保存させたいと考えています。
####$("#work").bind('keyup', function () { //自動保存の際に←を使用して自動保存をしようと考えましたが、テキストエリアが3つあるとどうしても1つしか記録されません。
'#private'と'#family'のテキストも同様に自動保存にしたいのですが、配列を使用したり、入力場所を変えても1つしか反応してくれません。
下記は保存対象を'#work’のみしか書いていない初期の分です。
何かアドバイスが頂けるとありがたいです。
HTML
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Mymemo</title> 9 <link rel="stylesheet" href="css/style.css"> 10 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 11 12<body> 13 <header> 14 <h2>Myメモ管理</h2> 15 </header> 16 17 <main> 18 <textarea name="work" id="work" placeholder="仕事の予定" cols="30" rows="10"></textarea> 19 <textarea name="private" id="private" placeholder="プライベートの予定" cols="30" rows="10"></textarea> 20 <textarea name="family" id="family" placeholder="家族の予定" cols="30" rows="10"></textarea> 21 </main> 22 23 <div> 24 <p><input type="button" id="save" value="保存"></p> 25 <p><input type="button" id="clear" value="メモを消去"></p> 26 </div> 27 28 <script> 29 30 $(function () { 31 //クリックイベント:保存 32 $("#work").bind('keyup', function () { 33 const work = $('#work').val(); 34 const private = $('#private').val(); 35 const family = $('#family').val(); 36 const Object = { 37 'work': work, 38 'private': private, 39 'family': family 40 }; 41 const json = JSON.stringify(Object); 42 localStorage.setItem('memo', json); 43 }); 44 45 46 47 //クリックイベント:消去 48 $('#clear').on('click', function () { 49 localStorage.removeItem('memo'); 50 $('#work').val(''); 51 $('#private').val(''); 52 $('#family').val(''); 53 }); 54 55 //ページ読み込み:保存データ取得表示 56 if (localStorage.getItem('memo')) { 57 const json = localStorage.getItem('memo'); 58 const object = JSON.parse(json); 59 $('#work').val(object.work); 60 $('#private').val(object.private); 61 $('#family').val(object.family); 62 }; 63 }); 64 65 66 67 68 </script> 69 70 71</body> 72 73</html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/27 14:10