인프런 커뮤니티 질문&답변

신혜리님의 프로필 이미지
신혜리

작성한 질문수

BBC 인터랙티브 페이지 "코로나19가 바꿀 사무실의 미래" 클론

JS part 2

actions[action] is not a function 라고 뜹니다

해결된 질문

작성

·

753

0

자꾸 질문만하네요..

혼자 찾아보려고 삽질하다가 도저히 모르겠어서 올립니다 😂😂😂 계속 actions[action] is not a function라고 뜨는데 뭐가 문제일까요..

js코드입니다 😂😂

(() => {

    const actions = {
        birdFlies(key) {
            if (key) {
                document.querySelector('[data-index="2"] .bird').style.transform = `translateX(${window.innerWidth}px)`;
            } else {
                document.querySelector('[data-index="2"] .bird').style.transform = `translateX(-100%)`;
            }
        }
    }

    const stepElems = document.querySelectorAll('.step');
    const graphicElems = document.querySelectorAll('.graphic-item');
    let currentItem = graphicElems[0];
    let ioIndex;

    const io = new IntersectionObserver((entriesobserver=> {
        ioIndex = entries[0].target.dataset.index * 1;
    });

    for (let i = 0i < stepElems.lengthi++) {
        io.observe(stepElems[i]);
        // stepElems[i].setAttribute('date-index', i);
        stepElems[i].dataset.index = i;
        graphicElems[i].dataset.index = i;
    }

    function activate(action) {
        currentItem.classList.add('visible');
        if (action) {
            actions[action](true);
        }
    }

    function inactivate(action) {
        currentItem.classList.remove('visible');
        if (action) {
            actions[action](false);
        }
    }




    window.addEventListener('scroll', () => {
        let step;
        let boundingRect;
        let temp = 0;

        for (let i = ioIndex - 1i < ioIndex + 2i++) {
            step = stepElems[i];
            if (!stepcontinue;

            boundingRect = step.getBoundingClientRect();

            if (boundingRect.top > window.innerHeight * 0.1 &&
                boundingRect.top < window.innerHeight * 0.8) {

                inactivate();
                currentItem = graphicElems[step.dataset.index];
                activate(currentItem.dataset.action);
            }
        }

    });
    activate();

})();

답변 5

0

신혜리님의 프로필 이미지
신혜리
질문자

감사합니다 ~_~ 한번 더 봐야겠네요

0

1분코딩님의 프로필 이미지
1분코딩
지식공유자

아 Caesiumy님 감사합니다! ㅎㅎㅎ

0

birdFlies2 함수를 선언해주시면 될 거 같습니다ㅎㅎ 영상에서도 같은 오류가 나타났던 거 같으니 좀 더 시청해보세요!

0

신혜리님의 프로필 이미지
신혜리
질문자

action이 정의되지 않았다고 하네요 😂

0

activate 함수에서 console.log(action) 으로 매개변수가 잘 들어오는지 확인해보시겠어요??

신혜리님의 프로필 이미지
신혜리

작성한 질문수

질문하기