JavaScriptで通し番号を用いた処理をしたい

Question

実現したいこと

ここに実現したいことを箇条書きで書いてください。

• それぞれ0〜4を表示するdiv要素に対し、順に0〜4のidを付与し、クリックされた要素のidと同じ数字をコンソール上に出力するイベントをセットしたい
• div要素の数は固定ではないためwhileを用いたい
• div要素に表示される文字は固定ではないため、表示されている文字列を利用して処理することはできない
• ビューファイルの当該箇所は下記の通り

<% 5.times do |i| %>
  <%= tag.div(i, class: 'test') %>
<% end %>

該当のソースコードと発生している問題

document.addEventListener('DOMContentLoaded', function(){
  // テストオブジェクトを取得
  const testObjects = document.getElementsByClassName('test');
  // テストオブジェクトが存在しなければ終了
  if (!testObjects) return null;

  const max = testObjects.length;
  let i = 0;
  while (i < max) {

    testObjects[`${i}`].setAttribute('id', `test_${i}`);
    const testObject = document.getElementById(`test_${i}`);
    testObject.addEventListener('click', function(){
      console.log(`${i}`);
    });
    i++;
  };
});

参照されるJavaScriptファイルを上のように記述したところ、idは順に0〜4が付与されたものの、どの要素をクリックしてもコンソール上には"5"と出力されてしまう。繰り返し処理のためにletで定義された変数は、呼び出し(ここでは14行目のイベント)のたびに再計算されるものと思い、下のように編集した。

試したこと

document.addEventListener('DOMContentLoaded', function(){
  // テストオブジェクトを取得
  const testObjects = document.getElementsByClassName('test');
  // テストオブジェクトが存在しなければ終了
  if (!testObjects) return null;

  const max = testObjects.length;
  let i = 0;
  while (i < max) {
    const iFixed = i;
    testObjects[`${i}`].setAttribute('id', `test_${i}`);
    const testObject = document.getElementById(`test_${i}`);
    testObject.addEventListener('click', function(){
      console.log(`${iFixed}`);
    });
    i++;
  };
});

10行目に

    const iFixed = i;

を挿入し、14行目を編集した。

      // 編集前
      console.log(`${i}`);
      // 編集後
      console.log(`${iFixed}`);

これによって意図する挙動を確認できましたが、これが連続する要素にそれぞれイベントをセットするための正攻法なのかわかりません。より一般的、スマートな方法があればご教示ください。
よろしくお願いいたします。

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

Ruby:2.6.5
Ruby on Rails:6.0.6

Answer 1

こんな感じで

<script>
document.addEventListener('DOMContentLoaded',()=>{
  [...document.querySelectorAll('.test')].forEach((x,y)=>{
    x.id=`test_${y}`;
    x.addEventListener('click',()=>{
      console.log(y);
    });
  });
});
</script>
<div class="test">a</div>
<div class="test">b</div>
<div class="test">c</div>
<div class="test">d</div>
<div class="test">e</div>

元ソースを活かすのであればwhileではなくforでまわすとか

document.addEventListener('DOMContentLoaded', function(){
  const testObjects = document.getElementsByClassName('test');
  for(let i=0;i<testObjects.length;i++){
    testObjects[i].setAttribute('id', `test_${i}`);
    testObjects[i].addEventListener('click', function(){
      console.log(i);
    });
  };
});

Comments

[taroyama_taro]

繰り返し処理の外でiを定義するのが綺麗でない(というか元凶となっている)のですね、勉強になりました。ありがとうございます。