回答編集履歴
3
テキスト修正
test
CHANGED
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
他にHTMLのほうで修正すべき点として下記の3点を提案します。
|
|
38
38
|
|
|
39
39
|
- `name="schedule"` のラジオボタンの `id` がどれも `r` になっており重複しているので、重複しないように要修正
|
|
40
|
-
- `country` のオプションが `<option value="台湾" />台湾` という書き方になっているが、`<option value="台湾">台湾<option>` に要修正
|
|
40
|
+
- `country` のオプションが `<option value="台湾" />台湾` という書き方になっているが、`<option value="台湾">台湾</option>` に要修正
|
|
41
41
|
- `country` のオプションが初期表示のときに、国がどこも選ばれていないことを示すために `<option value=""></option>` というオプションを一番上に追加しておくとよい
|
|
42
42
|
|
|
43
43
|
|
2
補足2
test
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
質問の本題に対する修正の一例を回答します。
|
|
1
|
+
はじめに質問の本題に対する修正の一例を回答します。その後、本題以外の部分で修正すべき点を補足します。
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
HTMLの表示用の要素の `id` 属性を以下のように修正します。
|
|
4
|
-
|
|
5
4
|
```diff
|
|
6
5
|
- <td id="disp1"></td>
|
|
7
6
|
+ <td id="disp-country"></td>
|
|
@@ -30,13 +29,10 @@
|
|
|
30
29
|
? [...document.querySelectorAll('input[name="place"]:checked')].map(e => e.value)
|
|
31
30
|
: value;
|
|
32
31
|
});
|
|
33
|
-
|
|
34
32
|
});
|
|
35
|
-
|
|
36
|
-
|
|
37
33
|
````
|
|
38
34
|
|
|
39
|
-
### 補足
|
|
35
|
+
### 補足1
|
|
40
36
|
|
|
41
37
|
他にHTMLのほうで修正すべき点として下記の3点を提案します。
|
|
42
38
|
|
|
@@ -45,4 +41,27 @@
|
|
|
45
41
|
- `country` のオプションが初期表示のときに、国がどこも選ばれていないことを示すために `<option value=""></option>` というオプションを一番上に追加しておくとよい
|
|
46
42
|
|
|
47
43
|
|
|
44
|
+
### 補足2
|
|
48
45
|
|
|
46
|
+
上記で挙げたコード例に対してのさらなる修正です。
|
|
47
|
+
|
|
48
|
+
**(1)** `name` 属性が `place` の複数のチェックボックスからチェックされているものの値の配列を得る
|
|
49
|
+
`[...document.querySelectorAll('input[name="place"]:checked')].map(e => e.value)`
|
|
50
|
+
は `name` が他のチェックボックスでも使えそうなので関数化しておきます。
|
|
51
|
+
|
|
52
|
+
```javascript
|
|
53
|
+
const checkedValues = name =>
|
|
54
|
+
[...document.querySelectorAll(`input[name="${name}"]:checked`)].map(e => e.value);
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
**(2)** 表示用要素に入力値をテキスト設定するところを関数化します。このとき、`name`属性によっては表示用に加工します。
|
|
59
|
+
|
|
60
|
+
```javascript
|
|
61
|
+
const displayValue = (name, value) => {
|
|
62
|
+
value = name === 'budget' ? `${(+value || 0).toLocaleString()} 円` : value;
|
|
63
|
+
document.getElementById(`disp-${name}`).innerText = value;
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
- 上記の(1)(2)を反映したCodepen 👉 https://codepen.io/su507/pen/OJZddEj?editors=1010
|
1
テキスト修正
test
CHANGED
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
|
|
43
43
|
- `name="schedule"` のラジオボタンの `id` がどれも `r` になっており重複しているので、重複しないように要修正
|
|
44
44
|
- `country` のオプションが `<option value="台湾" />台湾` という書き方になっているが、`<option value="台湾">台湾<option>` に要修正
|
|
45
|
-
- `country` のオプションが初期表示のときに、国がどこも選ばれていないことを示すために `<option value=""
|
|
45
|
+
- `country` のオプションが初期表示のときに、国がどこも選ばれていないことを示すために `<option value=""></option>` というオプションを一番上に追加しておくとよい
|
|
46
46
|
|
|
47
47
|
|
|
48
48
|
|