Javascriptのループに関して

Question

解決したい内容

下記コード内の数値(1~5)に変数「i」を代入(追加？)する方法が知りたい。

例：let se1 = parseInt((document.getElementById('se1').textContent));
→let sei = parseInt((document.getElementById('sei').textContent));

$(".boxa").on("click",function(){
		let se1 =  parseInt((document.getElementById('se1').textContent));
		let se2 =  parseInt((document.getElementById('se2').textContent));
		let se3 =  parseInt((document.getElementById('se3').textContent));
		let se4 =  parseInt((document.getElementById('se4').textContent));
		let se5 =  parseInt((document.getElementById('se5').textContent));
		let exp1 =  parseInt((document.getElementById('exp1').textContent));
		let exp2 =  parseInt((document.getElementById('exp2').textContent));
		let exp3 =  parseInt((document.getElementById('exp3').textContent));
		let exp4 =  parseInt((document.getElementById('exp4').textContent));
		let exp5 =  parseInt((document.getElementById('exp5').textContent));
		let total1 = exp1 + se1;
		let total2 = exp2 + se2;
		let total3 = exp3 + se3;
		let total4 = exp4 + se4;
		let total5 = exp5 + se5;

		document.getElementById('exp1').textContent = total1;
		document.getElementById('exp2').textContent = total2;
		document.getElementById('exp3').textContent = total3;
		document.getElementById('exp4').textContent = total4;
		document.getElementById('exp5').textContent = total5;
});

問題点

whileループ等で1~5を省略した方がコードが少なくなるので解決したい。
しかし、変数の中に変数「i」を加える方法がわからなかった。
getElementById()内の代入が変数への変更と違い、VScode内で文字色が全然変わらなかった。
これより効率の良いやり方があるのであれば教えて頂きたい。

let i = 1
while(i <= 5){
　上記上部(let)
　i += 1
　上記下部(document)
}

環境

VScode

Answer 1

document.getElementByIdの中身は('se' + i)のようにすればいいのですが、変数名を動的に生成するのは、特殊な事情がない限りやるべきではありません。代わりに配列を使いましょう。

…というより、1つずつ対応していけば、変数は5つ作る必要もないです。

$(".boxa").on("click",function(){
let i = 1
while(i <= 5){
  let se = parseInt((document.getElementById('se' + i).textContent));
  let exp =  parseInt((document.getElementById('exp' + i).textContent));

  let total = exp + se;

  document.getElementById('exp' + i).textContent = total;

　i += 1;
}

Comments

[LBciel.]

「get内」「変数の説明」「配列の作り方」と、知りたかった内容をすべてお答えいただき有難う御座います！無事解決することが出来ました！こちらの回答を参考にいろいろと試しながら学んでいきたいと思います。

私事で恐縮ですが、3日程前にJavaScriptの参考書を購入し勉強し始めたばかりで、購入したものがやって覚えるというより読んで覚えるものだった為自分に合わず、とりあえず作りながらと勉強しておりました。初歩的な質問であったと思いますが、丁寧にお答えいただき嬉しく存じます。有難う御座いました！

Answer 2

しかし、変数の中に変数「i」を加える方法がわからなかった。

配列、リストにしようよ

Comments

[LBciel.]

ご回答有難う御座います！
まだ詳しく理解が出来ていない範囲でしたので、今後の課題とさせて頂きます。