質問編集履歴
4
書き方変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -40,6 +40,8 @@
|
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
|
|
43
|
+
```
|
|
44
|
+
```css
|
|
43
45
|
button.btn-gradient {
|
|
44
46
|
margin: auto auto;
|
|
45
47
|
font-size: 80px;
|
3
CSSの追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,3 +1,23 @@
|
|
|
1
|
+
|
|
2
|
+
### 前提・実現したいこと
|
|
3
|
+
max/mspという別ののソフトウェアからの命令により、JavaScriptでのカウントダウンをHTML上で表示しております。
|
|
4
|
+
毎度3,2,1とカウントダウンは表示されるのですが、document.getElementById("button1").classList.add("functionbutton2");と
|
|
5
|
+
document.getElementById("button1").classList.add("functionbutton3");
|
|
6
|
+
のCSSが最初の一度しか反映されません。
|
|
7
|
+
こちらはカウントダウン中にCSSを情報を反映させたいという事で書きました。（書く場所が正しいかどうかは分かりません、、、）
|
|
8
|
+
何か対処法があればよろしくお願いします。
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### 発生している問題・エラーメッセージ
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
document.getElementById("button1").classList.add("functionbutton2");
|
|
15
|
+
document.getElementById("button1").classList.add("functionbutton3");
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
### 該当のソースコード
|
|
19
|
+
|
|
20
|
+
```JavaScript
|
|
1
21
|
<div class="functionbutton2 functionbutton3">
|
|
2
22
|
<button class="btn btn-gradient" id="button1"></button>
|
|
3
23
|
</div>
|
|
@@ -20,7 +40,6 @@
|
|
|
20
40
|
}
|
|
21
41
|
|
|
22
42
|
|
|
23
|
-
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
|
|
24
43
|
button.btn-gradient {
|
|
25
44
|
margin: auto auto;
|
|
26
45
|
font-size: 80px;
|
|
@@ -41,9 +60,13 @@
|
|
|
41
60
|
border-radius:0%;
|
|
42
61
|
}
|
|
43
62
|
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### 試したこと
|
|
44
|
-
|
|
66
|
+
CSSセレクタを取得しようとすると
|
|
45
|
-
毎度3,2,1とカウントダウンは表示されるのですが、document.getElementById("button1").classList.add("functionbutton2");と
|
|
46
|
-
|
|
67
|
+
Uncaught SyntaxError: Private field '#button2' must be declared in an enclosing class
|
|
68
|
+
と表示されてしまいました。
|
|
69
|
+
|
|
70
|
+
### 補足情報（FW/ツールのバージョンなど）
|
|
71
|
+
|
|
47
|
-
|
|
72
|
+
ここにより詳細な情報を記載してください。
|
|
48
|
-
こちらはカウントダウン中にCSSを情報を反映させたいという事で書きました。（書く場所が正しいかどうかは分かりません、、、）
|
|
49
|
-
何か対処法があればよろしくお願いします。
|
2
CSSの追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -21,6 +21,17 @@
|
|
|
21
21
|
|
|
22
22
|
|
|
23
23
|
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
|
|
24
|
+
button.btn-gradient {
|
|
25
|
+
margin: auto auto;
|
|
26
|
+
font-size: 80px;
|
|
27
|
+
text-transform: uppercase;
|
|
28
|
+
letter-spacing: 0.15em;
|
|
29
|
+
font-family:'Montserrat', Helvetica, Arial, sans-serif;
|
|
30
|
+
color: rgb(255,255,255);
|
|
31
|
+
width: 400px;
|
|
32
|
+
height: 400px;
|
|
33
|
+
background-color: rgb(0,0,255);
|
|
34
|
+
}
|
|
24
35
|
|
|
25
36
|
.functionbutton2{
|
|
26
37
|
border-radius: 50%;
|
1
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -19,6 +19,17 @@
|
|
|
19
19
|
}}, 1000);
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
+
|
|
23
|
+
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
|
|
24
|
+
|
|
25
|
+
.functionbutton2{
|
|
26
|
+
border-radius: 50%;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.functionbutton3{
|
|
30
|
+
border-radius:0%;
|
|
31
|
+
}
|
|
32
|
+
|
|
22
33
|
max/mspという別ののソフトウェアからの命令により、JavaScriptでのカウントダウンをHTML上で表示しております。
|
|
23
34
|
毎度3,2,1とカウントダウンは表示されるのですが、document.getElementById("button1").classList.add("functionbutton2");と
|
|
24
35
|
document.getElementById("button1").classList.add("functionbutton3");
|