[JavaScript] 写真にマウスオーバーで対象の名前が出てくるようにしたい

Question

前提・実現したいこと

JavaScriptで表示されている複数の画像に対して、
画像にマウスオーバーしたら、対象の名前が表示されるシステムを作りたいです。

現在はマウスオーバーしたら、クラスが追加されてスタイルが適用されるところまではできたのですが、
画像と名前を配列化してそれぞれをペアにすることができずに、
行き詰まっています。

JavaScriptの勉強をしながら制作しているので、
JavaScriptでご教授頂けると嬉しいです。

発生している問題・エラーメッセージ

const photo = document.getElementsByClassName("photo");
const names = document.getElementsByClassName("name");
for (var i = 0; i < photo.length; i++) {
photo[i].addEventListener("mouseover",function(){
names[i].classList.add('hover');
console.log("a");
の部分で、names[i]の配列を認識してくれません。
names[i]をnames[0]のように数字を入れると認識してくれます。

該当のソースコード

<section class="gallery">
            <div class="baby_photo">
                <p><img src="gallery_contents/baby1.JPG" alt="baby" class="photo"></p>
                <p class="name">Baby</p>
            </div>
            <div class="kids_photo">
                <p><img src="gallery_contents/kids1.JPG" alt="kids" class="photo"></p>
                <p class="name">Kids</p>
            </div>
            <div class="portrait">
                <p><img src="gallery_contents/portrait1.JPG" alt="portrait" class="photo"></p>
                <p class="name">Portrait</p>
            </div>
            <div class="show">
                <p> <img src="gallery_contents/show1.JPG" alt="show" class="photo"></p>
                <p class="name">Show</p>
            </div>
            <div class="nature">
                <p><img src="gallery_contents/nature.JPG" alt="nature" class="photo"></p>
                <p class="name">Nature</p>
            </div>
            <div class="food">
                <p><img src="gallery_contents/food.JPG" alt="food" class="photo"></p>
                <p class="name">Food</p>
            </div>
        </section>

<script type="text/javascript">
        //photoをホバーさせた時にnameが出てくる処理
        const photo = document.getElementsByClassName("photo");
        const names = document.getElementsByClassName("name");
        for (var i = 0; i < photo.length; i++) {
            photo[i].addEventListener("mouseover",function(){ //ホバーでフェードを取得
                names[i].classList.add('hover'); //iだと不可
                console.log("a"); //テスト　後で消す

                this.addEventListener('mouseout', function() {　//ホバー解除でフェードを外す
                this.classList.remove('hover');
                })
            })
        }

      </script>

.hover{ /*ホバーされたら*/
    transform-origin: top;
    transform: scale(2.2);
}

補足情報

Comments

[m.ts10806]

title属性では不足ですか？
それとも、ツールチップのような表示を目指しているのでしょうか

Answer 1

var⇒let

Comments

[andy23]

簡単なミスでした！ご指摘ありがとうございます！