[JS]同じ計算式をまとめる為の記述方法についてアドバイをお願い致します

前提・実現したいこと

チェックボックスの中で、カウントされるタイプを2つに分け、それぞれカウントするコードを記述しました。
ただ、中身の計算式は、ほぼ同じになります。
何かまとめる方法は、ないでしょうか？
アドバイをいただけたらと思います。よろしくお願いいたします。

該当のソースコード

javascript
1function checkbox() {
2
3  // チェックされたチェックボックスを取得
4  const checksA = document.getElementsByClassName("checks_one")
5  const checksB = document.getElementsByClassName("checks_two")
6  const btn = document.getElementById("btn");
7
8  btn.addEventListener("click", () => {
9
10      let countA = 0;
11      for (let i = 0; i < checksA.length; i++) {
12          if (checksA[i].checked){
13              countA = countA + 1 ;
14              console.log(countA)
15          }
16      }
17
18      console.log(`タイプAの合計は${countA}です`)
19      const countSumA = document.getElementById("sum_one")
20      countSumA.innerHTML = countA
21
22
23
24      let countB = 0;
25      for (let i = 0; i < checksB.length; i++) {
26          if (checksB[i].checked){
27              countB = countB + 1 ;
28              console.log(countB)
29          }
30      }
31
32      console.log(`タイプBの合計は${countB}です`)
33      const countSumB = document.getElementById("sum_two")
34      countSumB.innerHTML = countB
35  })
36}
37window.addEventListener("load",checkbox)

試したこと

javascript
1if (document.getElementsByClassName("checks_one")){
2    const checks = checksA
3  } else {
4    const checks = checksB
5  }

if文を使い変数の中身を変えたらいけるのでは？っと思っていたのですが、スコープ外になったりと、うまくいきませんでした。
アドバイスの程よろしくお願いします。

###追記

javascript
1function countCheckedCheckbox(className, sumElement, logname) {
2  const checks = document.getElementsByClassName(className);
3  let count = 0
4  for (let i = 0; i < checks.length; i++){
5    if (checks[i].checked){
6      count = count + i;
7    }
8  }
9
10  console.log(`${logname}の合計は${count}です`);
11  sumElement.innerHTML = count;
12}
13
14function checkbox() {
15
16  const checksA = document.getElementsByClassName("checks_one");
17  const checksB = document.getElementsByClassName("checks_two");
18  const btn = document.getElementById("btn")
19
20  btn.addEventListener("click", () => {
21    
22    const countSumA = document.getElementById("sum_one")
23    const countSumB = document.getElementById("sum_two")
24
25    countCheckedCheckbox(checksA, countSumA, "タイプA");
26    countCheckedCheckbox(checksB, countSumB, "タイプB");
27  })
28
29}
30window.addEventListener("load",checkbox)

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

回答3件

こんにちは

チェックされているチェックボックスの数を数えるのであれば、querySelectorAll と、擬似クラスセレクター:checked を使うと手短かに書けます。また、countA と countB を算出するコードが共通であることは、map を使うなどしてまとめられます。以下そのサンプルです。

javascript
1const [countA, countB] = ['one', 'two'].map(x =>
2  document.querySelectorAll(`.checks_${x}:checked`).length
3);

動作確認用サンプル： codepen.io/jun68ykt/pen/jOrPMzW

参考になれば幸いです。

投稿2020/10/11 03:44

jun68ykt

総合スコア9058

beginner.tanaka

2020/10/11 05:54

サンプルまで用意していただきまして、ありがとうございます。 querySelectorAllやmapメソッドについては、しっかり理解した上で実装しようと思います！とても為になる方法を教えていただきありがとうございます！

jun68ykt

2020/10/11 22:21

どういたしまして > querySelectorAllやmapメソッドについては、しっかり理解した上で実装しようと思います！はい。一個ずつ着実に自分のものにしていくと、よいかと思います、

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

ベストアンサー

頑張ればもっと短くできそうですが、とりあえず重複している部分をまとめてみました。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function countCheckedCheckbox(elements, sumElement, logname) {
            let count = 0;
            for (let i = 0; i < elements.length; i++){
                if (elements[i].checked){
                    count = count + 1;
                }
            }

            console.log(`${logname}の合計は${count}です`);
            sumElement.innerHTML = count;
        }

        function checkbox() {
            const checksA = document.getElementsByClassName("checks_one");
            const checksB = document.getElementsByClassName("checks_two");
            const btn = document.getElementById("btn")

            btn.addEventListener("click", () => {

                const countSumA = document.getElementById("sum_one")
                const countSumB = document.getElementById("sum_two")

                countCheckedCheckbox(checksA, countSumA, "タイプA");
                countCheckedCheckbox(checksB, countSumB, "タイプB");
            })
        }
        window.addEventListener("load",checkbox);
    </script>
</head>
<body>
    <input type="checkbox" class="checks_one">one1
    <input type="checkbox" class="checks_one">one2
    <input type="checkbox" class="checks_one">one3
    <input type="checkbox" class="checks_one">one4
    <input type="checkbox" class="checks_one">one5
    <br>
    <input type="checkbox" class="checks_two">two1
    <input type="checkbox" class="checks_two">two2
    <input type="checkbox" class="checks_two">two3
    <input type="checkbox" class="checks_two">two4
    <input type="checkbox" class="checks_two">two5
    <br>
    タイプAの合計<span id="sum_one">-1</span>タイプBの合計<span id="sum_two">-1</span><br>
    <button id="btn">合計</button>
</body>
</html>

投稿2020/10/11 03:51

編集2020/10/11 05:15

YakumoSaki

総合スコア2027

beginner.tanaka

2020/10/11 04:51

丁寧に回答していただきありがとうございます！上記のように記述したのですが、カウントがされないようです。追記に、記述したコードを載せております。ご指摘のほどよろしくお願いします。

YakumoSaki

2020/10/11 05:17

追記したコードが2箇所ほど間違っているようなので、修正したコードを、回答の修正として載せました。 1. count = count + 1; // count = count + i となっていた 2. countCheckedCheckboxの第一引数に要素のリスト(checksA/B)が渡されていたのでcountCheckedCheckboxの仕様を変更した

beginner.tanaka

2020/10/11 05:52

ありがとうございます！無事に解決することができました！！

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

処理を行う関数を別途定義して、
foo("タイプA", checksA, countSumA);foo("タイプB", checksB, countSumB);
のように呼び出せば良いのでは？

投稿2020/10/11 03:44