回答編集履歴
2
.
test
CHANGED
|
@@ -8,13 +8,22 @@
|
|
|
8
8
|
'variable.percentage + ' % '';
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
エラーの直接の原因は`getElementById()` に `#なんとか` という引数を渡していることなので `#` を消すか `querySelector()` に変えればよいです。しかしそれを直しても「最初の棒グラフしか幅が設定できない」という問題があるはずです。
|
|
11
|
+
エラーの直接の原因は`getElementById()` に `#なんとか` という引数を渡していることなので `#` を消すか `querySelector()` に変えればよいです。しかしそれを直しても「同じ完了率の最初の棒グラフしか幅が設定できない」という問題があるはずです。
|
|
12
12
|
|
|
13
13
|
1つのHTMLページ中で、同じ`id`属性値を複数の要素に指定してはいけません。`getElementById()` は、指定したID値を持つ最初の要素だけを返します。ここは「`class="graf-bar"` を持つ最後の要素」などで対象を指定しましょう。
|
|
14
14
|
```js
|
|
15
15
|
const graphBars = document.querySelectorAll('#class__graf-container .graf-bar');
|
|
16
16
|
graphBars[graphBars.length - 1].style.width = `${variable.percentage}%`;
|
|
17
17
|
```
|
|
18
|
+
|
|
19
|
+
HTMLの生成と同時にやってしまってもいいですね。
|
|
20
|
+
```js
|
|
21
|
+
<div class="graf-bar" style="width: ${variable.percentage}%;"><span></span></div>
|
|
22
|
+
</td>
|
|
23
|
+
</tr>`
|
|
24
|
+
);
|
|
25
|
+
```
|
|
26
|
+
|
|
18
27
|
---
|
|
19
28
|
参考までに、この用途で横向きの棒グラフだと、`<progress>` が適任かもしれません。
|
|
20
29
|
|
1
.
test
CHANGED
|
@@ -15,4 +15,6 @@
|
|
|
15
15
|
const graphBars = document.querySelectorAll('#class__graf-container .graf-bar');
|
|
16
16
|
graphBars[graphBars.length - 1].style.width = `${variable.percentage}%`;
|
|
17
17
|
```
|
|
18
|
+
---
|
|
19
|
+
参考までに、この用途で横向きの棒グラフだと、`<progress>` が適任かもしれません。
|
|
18
20
|
|