Q&A
まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。
textarea内で入力した文章をlocalStorageに保存して、保存したものをtextarea内に入れたいのですがコードが間違っているのかできません。理由と解決方法を教えてください。よろしくお願いします。
index.html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>スケジュルアプリ</title> 7 <link rel="stylesheet" href="index.css"> 8</head> 9<body> 10 <span id="schedules"></span> 11 <table> 12 </table> 13 <script src="index.js"></script> 14</body> 15</html>
document.getElementById(scheduleat${name}).value = schedulesText;
の処理がうまくいっていないみたいです
index.js
1'use strict'; 2 3String.prototype.capitalize = function() { 4 return this.charAt(0).toUpperCase() + this.slice(1); 5}; 6 7const PERIODS_OF_A_DAY = [ 8 { name: "morning", label: "朝" }, 9 { name: "noon", label: "昼" }, 10 { name: "night", label: "夜" } 11]; 12 13function reload() { 14 const schedulesText = PERIODS_OF_A_DAY.map(({ name }) => 15 localStorage.getItem(`ScheduleAt${name.capitalize()}`) 16 ).join(''); 17 document.getElementById(`scheduleat${name}`).value = schedulesText; 18} 19 20function save(name) { 21 const value = document.getElementById(`scheduleat${name}`).value; 22 const key = `ScheduleAt${name.capitalize()}`; 23 localStorage.setItem(key, value); 24 reload(); 25} 26 27const tableRow = ({name, label}) => 28 `<tr> 29 <th>${label}</th> 30 <td><textarea id="scheduleat${name}" cols="30" rows="3"></textarea></td> 31 <td><input type="button" value="保存${label}" onclick="save('${name}')" ></td> 32 </tr>`; 33 34document.addEventListener('DOMContentLoaded', function() { 35 const table = document.querySelector('table'); 36 table.innerHTML = PERIODS_OF_A_DAY.map(tableRow).join(''); 37 reload(); 38});
回答1件
0
ベストアンサー
そもそも schedulesText が「全ての予定をまとめたテキスト」になっているので、根本的に考えなおしたほうがよいと思います。
localStorageにキーとの対応として入れるより、スケジュールデータの配列をJSON文字列にして入れたほうが管理しやすいと思います。
js
1function reload() { 2 const schedulesText = PERIODS_OF_A_DAY.map(/**/).join(''); 3 // ↓ 定義していない（mapに渡した関数内のものにはアクセスできない） 4 document.getElementById(`scheduleat${name}`).value = schedulesText; 5}
投稿2020/06/12 12:17
総合スコア69407
お答えいただきありがとうございます。ですが
document.getElementById(scheduleat${name}).value = schedulesText;
の部分を
document.getElementById('schedules').textContent = schedulesText;
とするとしっかり一つ一つのコメントを取得できるのです。これのidをただ
scheduleat${name}に変更しただけなのになぜか取得できません。
mapに渡している関数の仮引数に使われている「name」はその関数内でしか参照できません。
やるならこう。
PERIODS_OF_A_DAY.forEach(({ name }) => {document.getElementById(`scheduleat${name}`).value = localStorage.getItem(`ScheduleAt${name.capitalize()}`);})
理解することができました。本当にありがとうございました。
あなたの回答
tips
プレビュー
