jsでtarget[1].addEventListenerができない。配列に入れた要素ではこのメソッドは使えないのか。

Question

質問内容
配列だとaddEventListenerができないのでしょうか。
またfor文に書き換えたいのですが、できないのでしょうか。

コード
var target = [];
for(var i=0; i<3; i++){
  target[i] = document.getElementById("word"+i+1);
}


//以下の部分がうまくいかない
target[0].addEventListener('mouseover', () => {
  mouseOnSlideAnimation(0);
  setTimeout("mouseOnSlideAnimationBack(0)",1000);
},false);
target[1].addEventListener('mouseover', () => {
  mouseOnSlideAnimation(1);
  setTimeout("mouseOnSlideAnimationBack(1)",1000);
},false);
target[2].addEventListener('mouseover', () => {
  mouseOnSlideAnimation(2);
  setTimeout("mouseOnSlideAnimationBack(2)",1000);
},false);

この時のエラーは
Cannot read property 'addEventListener' of null
です。
ただこのエラーが発生しているのがtarget[0].addから始まる文ではなく、target[1].addから始まる文がエラーになっています。

---

試み１
そして配列でうまくできるのであれば、このようにfor文でうまくやりたいと思っています。

コード
for(var i=0; i<20; i++){
  target[i].addEventListener('mouseover', () => {
    mouseOnSlideAnimation(i);
    setTimeout("mouseOnSlideAnimationBack(i)",1000);
  },false);
}

この時のエラーも
Uncaught TypeError: Cannot read property 'addEventListener' of null
でした。

---

試み２
以下のことはエラーが出ずにうまくいきました。

コード
target = document.getElementById("word1");
target.addEventListener('mouseover', () => {
  mouseOnSlideAnimation(1);
  setTimeout("mouseOnSlideAnimationBack(1)",1000);
},false);

配列を使わないとうまく動作しました。

コード
var target = [];
for(var i=0; i<3; i++){
  target[i] = document.getElementById("word"+i+1);
}
target[0].addEventListener('mouseover', () => {
  mouseOnSlideAnimation(0);
  setTimeout("mouseOnSlideAnimationBack(0)",1000);
},false);

配列も0番目だけはうまくいきます。

Answer 1

"word"+i+1は左から計算されるので、"word"、i、1がそれぞれ文字列連結されてしまい、word01、word11、word21を探すことになってしまいます。そのIDが見つからないためのnullです。

"word"+(i+1)と、数値としての足し算を実行させるためにカッコを付けましょう。

Comments

[oika77]

ありがとうございました。解決しました。