checked判定で任意の値に進捗ゲージを動かしたい

前提・実現したいこと

はじめまして、JavaScript独学の初学者です。
今回自身のwordpressに「チェックボックスでプログレスバーを動かす」を実装していきたいと考えております。

https://kimmobrunfeldt.github.io/progressbar.js/
上記、progressbar.jsのライブラリを使用して、SemiCircleプログレスバーを実装しました。
その下に、チェックボックスを配置し、javascriptにてchecked判定でプログレスバーを進めたり戻したり。といったものは実装できました。

※実際のWordPress環境ではなく、VsCodeにて４つのファイルを作成し、サクッと実装確認ができればと思っています。

###　質問内容

チェック１、２、３と順番にチェックし、チェック３、２、１と順番にチェックを外せば、プログレスバーの値は０になるのですが、チェックボックスを規則性なく適当に押すと、バーが正しく動きません。
チェックボックスを押したら、任意の値でプログレスバーを動かすようにするにはどうすればよいでしょうか？

該当のソースコード

html
1<html>
2<head>
3  <link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
4  <link href="./myprogress.css" rel="stylesheet" type="text/css">
5  <script type="text/javascript" src="./progressbar.min.js"></script>
6</head>
7  <div id="container"></div>
8  <script type="text/javascript" src="./myprogress.js"></script>
9
10<input type="checkbox" id="check1" value="red" /> チェック１</input>
11<input type="checkbox" id="check2" value="red" /> チェック２</input>
12<input type="checkbox" id="check3" value="red" /> チェック３</input>
13
14<script>
15  const check1 = document.getElementById("check1");
16
17
18  check1.addEventListener("click", function (e) {
19    if (check1.checked) {
20      bar.animate(0.33);
21    } else {
22      bar.animate(0);
23    }
24  });
25
26  const check2 = document.getElementById("check2");
27
28  check2.addEventListener("click", function (e) {
29    if (check2.checked) {
30      bar.animate(0.66);
31    } else {
32      bar.animate(0.33);
33    }
34  });
35
36  const check3 = document.getElementById("check3");
37
38  check3.addEventListener("click", function (e) {
39    if (check3.checked) {
40      bar.animate(1.0);
41    } else {
42      bar.animate(0.66);
43    }
44  });
45</script>
46
47</body>
48</html>
49

js
1// progressbar.js@1.0.0 version is used
2// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/
3
4var bar = new ProgressBar.SemiCircle(container, {
5  strokeWidth: 6,
6  color: "#FFEA82",
7  trailColor: "#eee",
8  trailWidth: 1,
9  easing: "easeInOut",
10  duration: 1400,
11  svgStyle: null,
12  text: {
13    value: "",
14    alignToBottom: false,
15  },
16  from: { color: "#FFEA82" },
17  to: { color: "#ED6A5A" },
18  // Set default step function for all animate calls
19  step: (state, bar) => {
20    bar.path.setAttribute("stroke", state.color);
21    var value = Math.round(bar.value() * 100);
22    if (value === 0) {
23      bar.setText("");
24    } else {
25      bar.setText(value);
26    }
27
28    bar.text.style.color = state.color;
29  },
30});

css
1#container {
2  margin: 20px;
3  width: 200px;
4  height: 100px;
5}

補足情報（FW/ツールのバージョンなど）

VSCODE:バージョン: 1.58.2

行動規範の内容に同意します

回答1件

ベストアンサー

どれをクリックしたかでなくいくつチェックしているかに応じて動かさなければいけません(実現したいことはあってるでしょうか)

js
1const average = (array) => array.reduce((accum, cur) => accum + cur, 0) / array.length;
2
3const animate = () => {
4    bar.animate(average([check1.checked, check2.checked, check3.checked]));
5};
6
7const check1 = document.getElementById("check1");
8check1.addEventListener("click", animate);
9
10const check2 = document.getElementById("check2");
11check2.addEventListener("click", animate);
12
13const check3 = document.getElementById("check3");
14check3.addEventListener("click", animate);

averageは配列の平均値を求める関数です。

checkedはbooleanですが、+演算子で使う場合trueは1falseは0とみなされます。

js
1(1 + true) === 2
2(1 + false) === 1

つまり、チェックされている(1)とチェックされていない(0)の平均で進行度となります。

アロー関数(() => {})とreduceについては以下を参照してください。
アロー関数式 - JavaScript | MDN
Array.prototype.reduce() - JavaScript | MDN

投稿2021/07/31 00:46

ka2obushi

総合スコア173

kay1221

2021/07/31 23:25

迅速なご回答ありがとうございました！実現イメージは仰る通りです。こちらの通り、コードを記述したらイメージ通りの挙動となりました。「どれをクリックしたかでなくいくつチェックしているか」この考え方になれなかったのは悔しい。。。そして、とても勉強なります！ checkedは演算子だとtrue === 1,false === 0になるのは知らなかった。。。チェックボックスを任意の数で増やしたり減らしたりする場合もあるかと思いますのでaverageはとても便利な関数ですね。リファレンスもありがとうございます！会社員やりつつ勉強していて、エンジニア転職を目指しています。とても勉強になりました。