for文を用いたstyleプロパティの変更がうまくできない

Question

タイトル通りです。
1番から18番のサムネイルにマウスを置いたり離したりすることで画像の大きさが変わるスクリプトを組んだのですが、
for文にするとうまくいきません。1個1個書くと動きます。
コンソールでみると、" cannot read property 'style' of undefined "とあったので
要素が1から18までしっかり取得できていること、for...inを使ってstyleプロパティがあることを確認したのですが、それ以上はわかりませんでした。
何が問題なのでしょうか？

for(var i = 1; i < 19; i++){
    elem[i] = document.getElementById('thumb' + i);
    elem[i].addEventListener('mouseover', function(){
        elem[i].style.height = '300px';
    }, false);

    elem[i].addEventListener('mouseout', function(){
        elem[i].style.height = '180px';
    }, false);
}

Answer 1

惜しいですね。

mouseover、mouseoutに渡したコールバックの中で、elem[i]がどうなっているか、iがどうなっているか確認してみましたか？
iはインクリメントされてしまっているので、コールバックが実行される時点ですでに19になってしまっているんです。
elem[19]にアクセスしても、そんなもの格納してないので存在しません。

じゃあどうするかというととても簡単で、イベントのコールバック関数の中ではthisがイベント発火元の要素を指しています。
こうするだけでOKです。

for(var i = 1; i < 19; i++){
    elem[i] = document.getElementById('thumb' + i);
    elem[i].addEventListener('mouseover', function(){
        this.style.height = '300px'; // elem[i] -> this
    }, false);

    elem[i].addEventListener('mouseout', function(){
        this.style.height = '180px'; // elem[i] -> this
    }, false);
}

ただし、コールバック関数としてアロー関数を渡した場合はこの方法は使えません。
アロー関数はthisを束縛しないからです。
その場合はこうします。

for(var i = 1; i < 19; i++){
    elem[i] = document.getElementById('thumb' + i);
    elem[i].addEventListener('mouseover', (event) => { // 引数を受け取る
        event.target.style.height = '300px'; // elem[i] -> event.target
    }, false);

    elem[i].addEventListener('mouseout', (event) => { // 引数を受け取る
        event.target.style.height = '180px'; // elem[i] -> event.target
    }, false);
}

Comments

[fukiten]

ありがとうございます！知りたかったのはまさにこれです。
画像の拡大縮小をやる前にmouseover, mouseoutでコンソールにiを出力させたのですが、
そのときに19しか出てこない謎も解けました。
thisはこういうところでつかうのですね。よくわからないので飛ばしてしまっていました。
改めて、ありがとうございました。

Answer 2

window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('[id^=thumb]'),function(x){
    if((r=x.getAttribute('id').match(/(\d+)$/)) && parseInt(r[1])>=1 && parseInt(r[1])<=18){
      x.addEventListener('mouseover', function(){
        x.style.height = '300px';
      });
      x.addEventListener('mouseout', function(){
        x.style.height = '180px';
      }, false);
    }
  });
});

追記

ちなみにelemを配列で宣言して、iをletで処理すればある程度までできます

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var elem=[];
  for(let i = 1; i < 4; i++){
    elem[i]=document.querySelector('#x'+i);
    elem[i].addEventListener('mouseover', function(e){
    console.log(i);
  });
  }
});

</script>

<div id="x1">1</div>
<div id="x2">2</div>
<div id="x3">3</div>
<div id="x4">4</div>