teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

解説の追加

2019/09/16 02:37

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -40,5 +40,4 @@
40
40
  document.getElementById("res").value = input;
41
41
  }
42
42
  ```
43
-
44
- forループでdiv-btnの背景色を戻しています。
43
+ getElementsByClassName は複数の要素を返しますので(Elementsと複数形になっていることに注目してください)、forループですべての div-btn の背景色を戻しています。

2

コード追加

2019/09/16 02:37

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -25,4 +25,20 @@
25
25
  }
26
26
  ```
27
27
 
28
- onclick の function の引数にthisを渡すことで、クリックした要素を取得できます。
28
+ onclick の function の引数にthisを渡すことで、クリックした要素を取得できます。
29
+
30
+ ---
31
+ コメントでの要望の、クリックした以外の要素の背景色を戻す処理を追加しました。
32
+ ```js
33
+ function func_1(button){
34
+ var elements = document.getElementsByClassName("div-btn");
35
+ for(i=0;i<elements.length;i++){
36
+ elements[i].style.backgroundColor = "lightgray";
37
+ }
38
+ button.style.background="red";
39
+ let input = button.firstElementChild.textContent;
40
+ document.getElementById("res").value = input;
41
+ }
42
+ ```
43
+
44
+ forループでdiv-btnの背景色を戻しています。

1

解説追加

2019/09/16 02:31

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -23,4 +23,6 @@
23
23
  let input = button.firstElementChild.textContent;
24
24
  document.getElementById("res").value = input;
25
25
  }
26
- ```
26
+ ```
27
+
28
+ onclick の function の引数にthisを渡すことで、クリックした要素を取得できます。