teratail
回答率
85.29%
質問するログイン新規登録
トップに関する質問classListからの操作でなぜアイコンが変わるのか

編集履歴

質問編集履歴

4

2018/07/06 15:24

投稿

Gecko
Gecko

スコア24

title CHANGED
File without changes
body CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
  ```JavaScript
22
22
  function like (num) {
23
- if (document.getElementByID("button-post-like-"+num).classList("like")) {
23
+ if (document.getElementByID("button-post-like-"+num).classList.contains("like")) {
24
24
  document.getElementById("button-post-like-"+num).classList.remove("ion-ios-heart", "like");
25
25
  document.getElementById("button-post-like-"+num).classList.add("ion-ios-heart-outline");
26
26
  } else {

3

不足部分の追記

2018/07/06 15:24

投稿

Gecko
Gecko

スコア24

title CHANGED
File without changes
body CHANGED
@@ -5,10 +5,10 @@
5
5
 
6
6
  ボタンをクリックすると
7
7
  **like(1)実行前**
8
- <ons-icon id="~" icon="~" class="ons-icon ons-icon--ion ion-ios-heart-outline">
8
+ <ons-icon id="button-post-like-1" icon="ion-ios-heart-outline" class="ons-icon ons-icon--ion ion-ios-heart-outline">
9
9
  **like(1)実行後**
10
- <ons-icon id="~" icon="~" class="ons-icon ons-icon--ion ion-ios-heart like">
10
+ <ons-icon id="button-post-like-1" icon="ion-ios-heart-outline" class="ons-icon ons-icon--ion ion-ios-heart like">
11
- のように変化するのはわかります。
11
+ のように変化していました。
12
12
 
13
13
  そこで、ion-iconはclassから指定できるのかなと思い、
14
14
  <ons-icon class="ons-icon ons-icon--ion ion-ios-heart-outline">
@@ -26,8 +26,8 @@
26
26
  } else {
27
27
  document.getElementById("button-post-like-"+num).classList.remove("ion-ios-heart-outline");
28
28
  document.getElementById("button-post-like-"+num).classList.add("ion-ios-heart","like");
29
+ };
29
30
  };
30
- };
31
31
  ```
32
32
  ```HTML
33
33
  <ons-button modifier="quiet" onclick="like(1)">

2

2018/07/06 09:49

投稿

Gecko
Gecko

スコア24

title CHANGED
File without changes
body CHANGED
@@ -27,6 +27,7 @@
27
27
  document.getElementById("button-post-like-"+num).classList.remove("ion-ios-heart-outline");
28
28
  document.getElementById("button-post-like-"+num).classList.add("ion-ios-heart","like");
29
29
  };
30
+ };
30
31
  ```
31
32
  ```HTML
32
33
  <ons-button modifier="quiet" onclick="like(1)">

1

2018/07/06 09:33

投稿

Gecko
Gecko

スコア24

title CHANGED
File without changes
body CHANGED
@@ -21,7 +21,7 @@
21
21
  ```JavaScript
22
22
  function like (num) {
23
23
  if (document.getElementByID("button-post-like-"+num).classList("like")) {
24
- document.getElementById("button-post-like-"+num).classList.remove("ion-ios-heart", "like);
24
+ document.getElementById("button-post-like-"+num).classList.remove("ion-ios-heart", "like");
25
25
  document.getElementById("button-post-like-"+num).classList.add("ion-ios-heart-outline");
26
26
  } else {
27
27
  document.getElementById("button-post-like-"+num).classList.remove("ion-ios-heart-outline");