回答編集履歴
2
コードのリファクタ
answer
CHANGED
|
@@ -8,39 +8,29 @@
|
|
|
8
8
|
|
|
9
9
|
btn.addEventListener('click', () => {
|
|
10
10
|
const n = Math.random();
|
|
11
|
+
/* 追加ここから */
|
|
12
|
+
clearClass(btn)
|
|
13
|
+
/* 追加ここまで */
|
|
14
|
+
|
|
11
15
|
if (n < 0.25) {
|
|
12
16
|
btn.textContent = '大吉';
|
|
13
|
-
/* 追加ここから */
|
|
14
|
-
removeClass(btn)
|
|
15
|
-
/* 追加ここまで */
|
|
16
17
|
btn.classList.add('daikiti');
|
|
17
|
-
|
|
18
18
|
} else if (n < 0.50) {
|
|
19
19
|
btn.textContent = '中吉';
|
|
20
|
-
/* 追加ここから */
|
|
21
|
-
removeClass(btn)
|
|
22
|
-
/* 追加ここまで */
|
|
23
20
|
btn.classList.add('chukiti');
|
|
24
|
-
|
|
25
21
|
} else {
|
|
26
22
|
btn.textContent = '凶';
|
|
27
|
-
/* 追加ここから */
|
|
28
|
-
removeClass(btn)
|
|
29
|
-
/* 追加ここまで */
|
|
30
23
|
btn.classList.add('kyo');
|
|
31
|
-
|
|
32
24
|
}
|
|
33
25
|
});
|
|
34
26
|
}
|
|
35
27
|
window.addEventListener("load", check);
|
|
36
28
|
|
|
37
|
-
|
|
38
29
|
// 指定してあるクラスを全て取り除く
|
|
39
30
|
// 特定のクラスだけ取り除きたいなら、クラスを指定してremoveする
|
|
40
|
-
function
|
|
31
|
+
function clearClass(element) {
|
|
41
32
|
element.classList.remove(...element.classList)
|
|
42
33
|
}
|
|
43
|
-
|
|
44
34
|
```
|
|
45
35
|
|
|
46
36
|
|
1
cssについての追記
answer
CHANGED
|
@@ -41,4 +41,8 @@
|
|
|
41
41
|
element.classList.remove(...element.classList)
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
```
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
#### 追記
|
|
48
|
+
3つクラスが指定されていても`kyo`が優先されるのは、cssで`#btn.kyo`が一番下に有るからです。
|