回答編集履歴
4
テキスト修正
answer
CHANGED
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
- ボタンの onclick を `save(朝昼夜を表す文字列)` のように修正
|
|
7
7
|
|
|
8
8
|
```html
|
|
9
|
-
<body>
|
|
10
9
|
<span id="schedules"></span>
|
|
11
10
|
<table>
|
|
12
11
|
<tr>
|
|
@@ -25,7 +24,6 @@
|
|
|
25
24
|
<td><input type="button" value="保存夜" onclick="save('night')" ></td>
|
|
26
25
|
</tr>
|
|
27
26
|
</table>
|
|
28
|
-
</body>
|
|
29
27
|
```
|
|
30
28
|
|
|
31
29
|
### index.js
|
3
テキスト修正
answer
CHANGED
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
|
|
71
71
|
## 追記
|
|
72
72
|
|
|
73
|
-
さらに、`index.html` のほうでは、`<table>` の行を書かないでおいて、`index.js` で行を追加することも考えられます。このようにすると、朝、昼、夜のほかに、新しい時間帯
|
|
73
|
+
さらに、`index.html` のほうでは、`<table>` の行を書かないでおいて、`index.js` で行を追加することも考えられます。このようにすると、朝、昼、夜のほかに、新しい時間帯を追加したいときにも、修正箇所を最小限にすることができます。以下、この趣旨による修正版です。
|
|
74
74
|
|
|
75
75
|
### index.html
|
|
76
76
|
```html
|
2
テキスト修正
answer
CHANGED
|
@@ -141,4 +141,6 @@
|
|
|
141
141
|
{ name: "night", label: "夜" },
|
|
142
142
|
{ name: "midnight", label: "深夜" },
|
|
143
143
|
];
|
|
144
|
-
```
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
- **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/XWXbEXX?editors=1010](https://codepen.io/jun68ykt/pen/XWXbEXX?editors=1010)
|
1
テキスト修正
answer
CHANGED
|
@@ -65,4 +65,80 @@
|
|
|
65
65
|
|
|
66
66
|
```
|
|
67
67
|
|
|
68
|
-
- **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/NWxqyBB?editors=1010](https://codepen.io/jun68ykt/pen/NWxqyBB?editors=1010)
|
|
68
|
+
- **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/NWxqyBB?editors=1010](https://codepen.io/jun68ykt/pen/NWxqyBB?editors=1010)
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
## 追記
|
|
72
|
+
|
|
73
|
+
さらに、`index.html` のほうでは、`<table>` の行を書かないでおいて、`index.js` で行を追加することも考えられます。このようにすると、朝、昼、夜のほかに、新しい時間帯が追加されたときも、修正箇所を最小限にすることができます。以下、この趣旨による修正版です。
|
|
74
|
+
|
|
75
|
+
### index.html
|
|
76
|
+
```html
|
|
77
|
+
<span id="schedules"></span>
|
|
78
|
+
<table>
|
|
79
|
+
</table>
|
|
80
|
+
```
|
|
81
|
+
### index.js
|
|
82
|
+
```javascript
|
|
83
|
+
'use strict';
|
|
84
|
+
|
|
85
|
+
// ???? https://stackoverflow.com/a/3291856
|
|
86
|
+
String.prototype.capitalize = function() {
|
|
87
|
+
return this.charAt(0).toUpperCase() + this.slice(1);
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
const PERIODS_OF_A_DAY = [
|
|
91
|
+
{ name: "morning", label: "朝" },
|
|
92
|
+
{ name: "noon", label: "昼" },
|
|
93
|
+
{ name: "night", label: "夜" }
|
|
94
|
+
];
|
|
95
|
+
|
|
96
|
+
function reload() {
|
|
97
|
+
const schedulesText = PERIODS_OF_A_DAY.map(({ name }) =>
|
|
98
|
+
localStorage.getItem(`ScheduleAt${name.capitalize()}`)
|
|
99
|
+
).join('');
|
|
100
|
+
document.getElementById('schedules').textContent = schedulesText;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
function save(name) {
|
|
104
|
+
const { value } = document.getElementById(`scheduleat${name}`);
|
|
105
|
+
const key = `ScheduleAt${name.capitalize()}`;
|
|
106
|
+
localStorage.setItem(key, value);
|
|
107
|
+
reload();
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
const tableRow = ({name, label}) =>
|
|
111
|
+
`<tr>
|
|
112
|
+
<th>${label}</th>
|
|
113
|
+
<td><textarea id="scheduleat${name}" cols="30" rows="3"></textarea></td>
|
|
114
|
+
<td><input type="button" value="保存${label}" onclick="save('${name}')" ></td>
|
|
115
|
+
</tr>`;
|
|
116
|
+
|
|
117
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
118
|
+
const table = document.querySelector('table');
|
|
119
|
+
table.innerHTML = PERIODS_OF_A_DAY.map(tableRow).join('');
|
|
120
|
+
reload();
|
|
121
|
+
});
|
|
122
|
+
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
上記のコードにある、以下の定数 `PERIODS_OF_A_DAY`
|
|
126
|
+
|
|
127
|
+
```javascript
|
|
128
|
+
const PERIODS_OF_A_DAY = [
|
|
129
|
+
{ name: "morning", label: "朝" },
|
|
130
|
+
{ name: "noon", label: "昼" },
|
|
131
|
+
{ name: "night", label: "夜" }
|
|
132
|
+
];
|
|
133
|
+
```
|
|
134
|
+
に、たとえば以下のように、夕方と深夜を追加すると、これらに対応した行が追加されます。
|
|
135
|
+
|
|
136
|
+
```javascript
|
|
137
|
+
const PERIODS_OF_A_DAY = [
|
|
138
|
+
{ name: "morning", label: "朝" },
|
|
139
|
+
{ name: "noon", label: "昼" },
|
|
140
|
+
{ name: "evening", label: "夕方" },
|
|
141
|
+
{ name: "night", label: "夜" },
|
|
142
|
+
{ name: "midnight", label: "深夜" },
|
|
143
|
+
];
|
|
144
|
+
```
|