inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

JS part 2

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

해결된 질문

993

신혜리

작성한 질문수 3

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분코딩

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

0

Caesiumy

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

0

신혜리

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

0

Caesiumy

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

LocationPermission.denied관련 질문입니다

0

585

1

writeHead 부분

0

466

1

로그인페이지, 회원가입페이지 못들어가게하는 부분

0

516

1

강의에서 사용하고 있는 next.js 버전으로 설치는 어떻게 하나요?

0

2342

1

[공유] react-mention 항상 커서 위에 나오게 수정

2

882

3

videocontrollor dispose

0

427

1

user 과 auth에서 인증 부분

0

447

1

onlogotap함수의 video nullable관련질문

0

387

1

채팅대화에서 시간이 중복될경우 안보이게 하는방법 문의.

0

542

1

쿠키에 대해서

0

315

1

next.js 버전이 12인건가요?

0

367

1

오류났을때 참고

3

685

3

style.css 오류

0

307

1

actions 함수 관련 질문

2

400

1

새가 원래자리로 돌아올때도 transition 시간이 필요한데. 돌아올때는 바로 돌아오록 하는 Tip 이 있을까요?

0

249

0

classList 오류가 계속 납니다..ㅜㅜ

0

395

0

새 애니메이션이 작동하지 않습니다.

0

239

1

action이 true일때 실행되는데 false에서 초기화가 안되요ㅠ

0

334

2

오류가 나는데 찾지를 못하겠어요...

0

375

2

안녕하세요 ~~ 배경으로 깔린 음악이 너무 궁금하네요 ㅎㅎ

0

540

2

첫번째랑 마지막 요가+폰하는 그림이 높이가 꼬였습니다

0

465

4

forEach로 작성해봤습니다!

1

285

1

안녕하세요, step부분 문의 드립니다.

0

218

1

질문있습니다!

2

310

2