繰り返し使う関数の書き方が分からない

Question

前提

<td class="score-p1"><input type="number"></td>

に値を入力したら

<td id="sum-p1"></td>

へ計算結果を反映。

<td class="score-p2"><input type="number"></td>

に値を入力したら

<td id="sum-p2"></td>

へ計算結果を反映させたいです。

実現したいこと

現在、class="score-p1"に値を入力した際にid="sum-p1"に計算結果が反映されるJavaScriptは書けています。
今後、class="score-p2"、class="score-p3"………と列を増やしていく予定ですが、列を増やしたときのJavaScriptのスマートな書き方が分かりません。

該当のソースコード

<table>
    <tbody id="score">
        <tr>
            <th>1</th>
            <td class="score-p1"><input type="number"></td>
            <td class="score-p2"><input type="number"></td>
        </tr>
        <tr>
            <th>2</th>
            <td class="score-p1"><input type="number"></td>
            <td class="score-p2"><input type="number"></td>
        </tr>
        <tr>
            <th>3</th>
            <td class="score-p1"><input type="number"></td>
            <td class="score-p2"><input type="number"></td>
        </tr>
        <tr>
            <th>4</th>
            <td class="score-p1"><input type="number"></td>
            <td class="score-p2"><input type="number"></td>
        </tr>
        <tr>
            <th>5</th>
            <td class="score-p1"><input type="number"></td>
            <td class="score-p2"><input type="number"></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>合計</th>
            <td id="sum-p1"></td>
            <td id="sum-p2"></td>
        </tr>
    </tfoot>
</table>

以下はclass="score-p1"に数値を入力したときid="sum-p1"に結果が反映されるJavaScriptです。

window.addEventListener('DOMContentLoaded', () => {

score.addEventListener('input', () => {
    // 要素を取得
    const score = document.getElementById('score');
    const scoreElements = score.querySelectorAll('.score-p1 input');
    var price = 0;

    // 取得した要素を反復処理
    for (let i = 0; i < scoreElements.length; i += 1) {
        const element = scoreElements[i];
        if (!isNaN(element.valueAsNumber))
        price += element.valueAsNumber;
    }

    document.getElementById('sum-p1').innerText = price;
});

})

class="score-p2"、class="score-p3"………と列を増やしたときにどういう書き方をすべきかご教示いただけたらと思います。
どうぞよろしくお願いいたします。

Answer 1

あえてp1、p2の入力をわけて考える必要はないですね
常に入力があるごとに計算してください

document.addEventListener('input', ()=>{
  ['p1','p2'].forEach(x=>{
    const v=[...document.querySelectorAll(`.score-${x} [type=number]`)].reduce((x,y)=>x+Number(y.value),0);
    document.querySelector(`#sum-${x}`).textContent=v;
  });
});

Answer 2

<td class="score-p1"> や <td id="sum-p1"> ではなくて、<td class="score" data-group="p1"> <td class="sum" data-group="p1"> のように役割とグループを分けると多少すっきりするかと思います。

score.addEventListener('input', e => {
    const group = e.target.closest('.score').dataset.group;
    const score = document.getElementById('score');
    const scoreElements = score.querySelectorAll(`.score[data-group="${group}"] input`);
    document.querySelector(`.sum[data-group="${group}"]`).textContent =
        [...scoreElements].map(input => isNaN(input.valueAsNumber) ? 0 : input.valueAsNumber).reduce((a, c) => a + c);
});

Answer 3

ベストアンサーまで出ちゃったのですが、目を見張るようなスマートなコードを見ることなく終わってしまったので、全然スマートじゃない汚いのを置いときます。class属性は基本的にCSSから参照されるので、見た目に関係ないところで使わない方がいい気がします。

window.addEventListener('DOMContentLoaded', () => {
	const score = document.getElementById('score');
	const suminfos = Array.from(document.querySelectorAll('td[id^="sum-"]'))
		.reduce((m, e)=>{
			const id = e.id.substring(4);
			m[id] = {
				"elem": e,
				"scores": Array.from(score.querySelectorAll(`td.score-${id} input`))
			};
			return m;
		}, {});
	const handler = (ev) => {
		const classList = Array.from(ev.currentTarget.parentElement.classList);
		const id = classList.filter(e => e.match(/^score-/))[0].substring(6);
		const suminfo = suminfos[id];
		suminfo.elem.textContent = suminfo.scores.reduce((s, v)=>{
			return s + (v.valueAsNumber ? v.valueAsNumber : 0);
		}, 0);
	};
	Object.entries(suminfos).forEach(([id, info]) => {
		info.scores.forEach(e => {
			e.addEventListener('input', handler);
		})
	});
});

---

他の回答も出てきてくれたのでコンセプトだけ書いておきます。

このコードのコンセプトは速度です(まだ速く出来ると思いますが)。イベント発生時DOMにqueryをかけることなく、適応的に計算結果を反映しています。

Answer 4

すっごく力技っぽくなっていますけど，こんな感じでどうですか？

window.addEventListener('DOMContentLoaded', () => {
    score.addEventListener('input', () => {
        // 要素を取得
        const score = document.getElementById('score');

        for (let a = 1; a <= 2; a ++) {  // classname をここで切り替えていく
            let scoreElements = score.querySelectorAll('.score-p' + String(a) + ' input');
            var price = 0;

            // 取得した要素を反復処理
            for (let i = 0; i < scoreElements.length; i += 1) {
                const element = scoreElements[i];
                if (!isNaN(element.valueAsNumber))
                    price += element.valueAsNumber;
            }

            document.getElementById('sum-p' + String(a)).innerText = price;
        }
    });
});

---

ただ，今後列を増やしていく上で現状のソースコードがスマートかと言われるとう〜んってなられているのではないでしょうか？

よろしければ，以下のソースコードも試してみてください．（こっちもスマートか言われる微妙ですが…）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./main.js"></script>
</head>
<body>
    <main role="main">
        <div id="__"></div>
    </main>
</body>
</html>

// main.js

/**
 * Tableを作る
 * @param {Number} rowNum 行数
 * @param {Number} score-p の数
 */
class Score {
  constructor(rowNum, pNum) {
    this.rowNum = rowNum;
    this.pNum = pNum;
    this.TABLE = document.createElement('table');

    this.setTbody();
    this.setTfoot();
  }

  setTbody() {
    let tbody = document.createElement('tbody');
    this.priceArray = new Array();

    for (let i = 0; i < this.rowNum; i ++) {
      let tr = document.createElement('tr');
      let th = document.createElement('th');
      th.innerText = String(i + 1);
      tr.appendChild(th);

      this.priceArray[i] = new Array();
      
      for (let j = 0; j < this.pNum; j ++) {
        let td = document.createElement('td');
        td.className = "score-p" + String(j + 1);

        let input = document.createElement('input');
        input.type = "number";

        td.appendChild(input);
        tr.appendChild(td);

        this.priceArray[i][j] = 0;
        
        // 値が入力されたら加算処理
        input.addEventListener('input', (e) => {
          this.priceArray[i][j] = Number(e.target.value);
          this.add(j);
        })
      }
      tbody.appendChild(tr);

    }

    this.TABLE.appendChild(tbody);
  }

  setTfoot() {
    let tfoot = document.createElement('tfoot');
    let tr = document.createElement('tr');
    let th = document.createElement("th");
    th.innerText = "合計";
    tr.appendChild(th);

    for (let j = 0; j < this.pNum; j ++) {
      let td = document.createElement('td');
      td.id = "sum-p" + String(j + 1);
      tr.appendChild(td);
    }

    tfoot.appendChild(tr);
    this.TABLE.appendChild(tfoot);
  }

  add(pNum) {
    let price = 0;
    for (let i = 0; i < this.rowNum; i ++) {
      price += this.priceArray[i][pNum];
    }

    document.getElementById("sum-p" + String(pNum + 1)).innerText = price;
  }
} 


window.onload = () => {
  const SCORE = new Score(5, 3);
  document.getElementById('__').appendChild(SCORE.TABLE);

  console.log(SCORE);
}

Comments

[syun1988]

ご回答ありがとうございました！
前者のコードで思い通りの挙動になりました。
お陰様で悩んでいた箇所が解決できました。

後者のコードはもっと自分がレベルアップしてから試してみたいと思います。
ありがとうございました。