JavaScript报错：找不到HandleCarouselContainerHover变量的原因排查

需求与问题 #

• 需求：鼠标悬停.carousel-container组件时显示白色div，点击该div弹出模态框
• 问题：触发mouseover/mouseout事件时，控制台出现错误：can't find variable HandleCarouselContainerHover

排查与解决方案 #

结合你列出的排查方向，逐一分析问题：

1. 函数名大小写不匹配（核心报错原因） #

报错提示找不到的是HandleCarouselContainerHover（大写H开头），但你JS代码里定义的函数是handleCarouselContainerHover（小写h开头）。

• 检查你的HTML代码，是否存在内联事件绑定（比如<div class="carousel-container" onmouseover="HandleCarouselContainerHover(event, 'show')">），如果有，把函数名改成小写开头的handleCarouselContainerHover即可。
• 你JS里用addEventListener绑定的调用是正确的，所以问题大概率出在HTML的内联事件上。

2. 额外代码问题（非当前报错，但会导致模态框异常） #

你的openModal函数里直接使用carouselContainer变量，但这个变量仅在carouselContainers.forEach的回调作用域内有效。虽然你用openModal.call(carouselContainer)绑定了this，但函数里没用到this，会导致后续调用报错。修改openModal函数：

function openModal() {
    try {
        var modal = document.getElementById("myModal");
        var modalTitle = modal.querySelector("h3");
        var modalContent = modal.querySelector("p");
    
        // 用this代替carouselContainer，call已将this绑定为当前的carouselContainer
        if (this.dataset.index === '1') {
            modalTitle.innerText = "프로젝트 1 모달";
            modalContent.innerText = "프로젝트 1 설명";
        } else if (this.dataset.index === '2') {
            modalTitle.innerText = "프로젝트 2 모달";
            modalContent.innerText = "프로젝트 2 설명";
        }
    
        modal.style.display = "block";
    } catch (error) {
        console.error('Error in openModal:', error);
    }
}

3. 其他排查点（若上述解决后仍有问题） #

• 脚本加载顺序：你已用DOMContentLoaded包裹代码，确保了DOM加载完成后执行JS，这部分没问题。
• 作用域有效性：handleCarouselContainerHover定义在DOMContentLoaded回调内部，在forEach的回调里调用是有效的，作用域无问题。

原代码 #

document.addEventListener('DOMContentLoaded', function () {
    const topbanners = document.querySelectorAll('.banner');
    let topBannerIndex = 0;

    // carousel-container
    const carouselContainers = document.querySelectorAll('.carousel-container');

    // carousel-container card mouseHover
    function handleCarouselContainerHover(event, action) {
        try {
            const container = event.currentTarget;
            const projectTitle = container.querySelector(".project-title");
            const overlay = container.querySelector('.overlay');

            if (action === 'show') {
                overlay.style.display = 'flex';
                projectTitle.style.opacity = '1';
            } else if (action === 'hide') {
                overlay.style.display = 'none';
                projectTitle.style.opacity = '0';
            }
        } catch (error) {
            console.error('Error in handleCarouselContainerHover:', error);
        }
    }

    carouselContainers.forEach((carouselContainer, index) => {
        const carousel = carouselContainer.querySelector('.carousel');
        const totalSlides = carousel.querySelectorAll('.card').length;
        const slideWidth = carousel.querySelector('.card').offsetWidth;
        let currentIndex = 0;

        function moveToSlide(index) {
            if (index < 0) {
                index = totalSlides - 1;
            } else if (index >= totalSlides) {
                index = 0;
            }

            currentIndex = index;
            const translateValue = -index * slideWidth;
            carousel.style.transform = `translateX(${translateValue}px)`;
        }

        //carousel card 조작
        function handleCarouselSlide(direction) {
            if (direction === 'next') {
                currentIndex = (currentIndex + 1) % (totalSlides - 2)
            } else if (direction === 'prev') {
                currentIndex = (currentIndex - 1 + (totalSlides - 2)) % (totalSlides - 2);
            }
            if (currentIndex === totalSlides - 1) {
                setTimeout(function () {
                    moveToSlide(0);
                });
            } else {
                moveToSlide(currentIndex);
            }
        }

        const prevButton = carouselContainer.querySelector('.control-button#prev');
        const nextButton = carouselContainer.querySelector('.control-button#next');

        prevButton.addEventListener('click', function () {
            handleCarouselSlide('prev');
        });

        nextButton.addEventListener('click', function () {
            handleCarouselSlide('next');
        });

        //carousel card Overlay
        const overlay = carouselContainer.querySelector('.overlay');

        // mouseover, mouseout 이벤트 리스너
        carouselContainer.addEventListener("mouseover", function(event) {
            handleCarouselContainerHover(event, 'show');
        });
        carouselContainer.addEventListener("mouseout", function(event) {
            handleCarouselContainerHover(event, 'hide');
        });
        carouselContainer.addEventListener("click", function (event) {
            if (event.target.classList.contains('carousel-container')) {
                openModal.call(carouselContainer);
            }
        });

        carouselContainer.dataset.index = (index + 1).toString();
    });

    //carousel card modal 조작
    function openModal() {
        try {
            var modal = document.getElementById("myModal");
            var modalTitle = modal.querySelector("h3");
            var modalContent = modal.querySelector("p");
        
            if (carouselContainer.dataset.index === '1') {
                modalTitle.innerText = "프로젝트 1 모달";
                modalContent.innerText = "프로젝트 1 설명";
            } else if (carouselContainer.dataset.index === '2') {
                modalTitle.innerText = "프로젝트 2 모달";
                modalContent.innerText = "프로젝트 2 설명";
            }
        
            modal.style.display = "block";
        } catch (error) {
            console.error('Error in openModal:', error);
        }
    }
});

内容的提问来源于stack exchange，提问作者JJJ