回答編集履歴
2
訂正
answer
CHANGED
|
@@ -22,7 +22,8 @@
|
|
|
22
22
|
dispSubBox(); // 一致する id がないので全て 非表示になる。
|
|
23
23
|
|
|
24
24
|
// 1. select.subbox の操作で値が変わると発火するイベント
|
|
25
|
+
//document.getElementById("cate").addEventListener("cange", function(event){
|
|
25
|
-
document.getElementById("cate").addEventListener("
|
|
26
|
+
document.getElementById("cate").addEventListener("change", function(event){
|
|
26
27
|
var elm = event.target; // select#id になる。
|
|
27
28
|
//console.log( elm.id ); // "cate"
|
|
28
29
|
//console.log( elm.value ); // サブBOXに与えた id と同じ
|
1
追記
answer
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
|
|
16
16
|
// 2. 表示/非表示を一気に更新する（表示条件は、引数と一致する id のサブBOX）
|
|
17
17
|
var dispSubBox = function(subId) {
|
|
18
|
-
[...document.querySelectorAll(".subbox2")].forEach(elm
|
|
18
|
+
[...document.querySelectorAll(".subbox2")].forEach(function(elm){
|
|
19
19
|
elm.style.display = elm.id===subId ? "inline": "none"
|
|
20
20
|
});
|
|
21
21
|
}
|
|
@@ -33,6 +33,7 @@
|
|
|
33
33
|
```
|
|
34
34
|
|
|
35
35
|
MDN
|
|
36
|
+
* [条件（三項）演算](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)
|
|
36
37
|
* [Event.target](https://developer.mozilla.org/ja/docs/Web/API/Event/target)
|
|
37
38
|
* [DOcument.querySelectorAll()](https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll)
|
|
38
39
|
* [スプレッド構文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax) で配列化し、[forEach](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) でループ。
|