EventListenerで外の変数を使いたい

Question

やりたいこと

複数のboxがあり、それらをクリックすると別々の出力が出る　というようなことをやりたいです。

<div class="box">boxA</div>
<div class="box">boxB</div>
<div class="box">boxC</div>

boxes=document.getElementsByClassName('box')
for(i=0;i<boxes.length;i++){
      boxes[i].addEventListener('click',function(){
        console.log(i) 
      })
}

求める出力

boxAをクリック→0
boxBをクリック→1
.....

現在の出力

どのboxをクリックしても 3が出力される

その他

都合があってdivの中身をいじる（事前にidを振っておいてそのidをクリック時に参照する　等）は避けたいです。何か良い方法はないでしょうか

Answer 1

// for(i=0;i<boxes.length;i++)
//     vvv
   for(let i=0;i<boxes.length;i++)