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

Question

// 즉시실행 인명함수 ( () => { const actions = { bordFlies (){ document . querySelector ([ ' data-index="2" ' ] . bird ) . style . transform = ` translateX($(window.innerWidth)px) ` ; } } const stepElems = document . querySelectorAll ( ' .step ' ) ; const graphicElems = document . querySelectorAll ( ' .graphic-item ' ) ; // 현재 활성화된(visible 클래스가 붙은) .graphic-item을 지정 let currentItem = graphicElems [ 0 ] ; let ioIndex ; const io = new IntersectionObserver ( ( entries , observer ) => { //console.log(entries[0].target.dataset.index); ioIndex = entries [ 0 ] . target . dataset . index * 1 ; //console.log(iosIndex); } ) ; for ( let i = 0 ; i < stepElems . length ; i ++ ) { io . observe ( stepElems [ i ]) ; //stepElems[i].setAttribute('data-index', i); stepElems [ i ] . dataset . index = i ; graphicElems [ i ] . dataset . index = i ; //console.log(stepElems[i].setAttribute('data-index', i)); } // 활성화 function activate ( action ){ currentItem . classList . add ( ' visible ' ) ; if ( action ) { actions [ action ]() ; // 오류 } console . log ( action ) ; } // 비활성화 function inactivate (){ currentItem . classList . remove ( ' visible ' ) ; } window . addEventListener ( ' scroll ' , () => { let step ; let boundingRect ; let temp = 0 ; //for (let i = 0; i < stepElems.length; i++){ for ( let i = ioIndex - 1 ; i < ioIndex + 2 ; i ++ ) { step = stepElems [ i ] ; if ( ! step ) continue ; boundingRect = step . getBoundingClientRect () ; //console.log(boundingRect.top); temp ++; // 범위설정 if ( boundingRect . top > window . innerHeight * 0.1 && boundingRect . top < window . innerHeight * 0.8 ) { //console.log(step.dataset.index); //graphicElems[step.dataset.index].classList.add('visible'); if ( currentItem ) { inactivate () ; } currentItem = graphicElems [ step . dataset . index ] ; activate ( currentItem . dataset . action ) ; // 오류 } } console . log ( temp ) ; } ) ; activate () ; } )() ; // 즉시실행 인명함수 ( () => { const actions = { bordFlies (){ document . querySelector ([ ' data-index="2" ' ] . bird ) . style . transform = ` translateX($(window.innerWidth)px) ` ; } } const stepElems = document . querySelectorAll ( ' .step ' ) ; const graphicElems = document . querySelectorAll ( ' .graphic-item ' ) ; // 현재 활성화된(visible 클래스가 붙은) .graphic-item을 지정 let currentItem = graphicElems [ 0 ] ; let ioIndex ; const io = new IntersectionObserver ( ( entries , observer ) => { //console.log(entries[0].target.dataset.index); ioIndex = entries [ 0 ] . target . dataset . index * 1 ; //console.log(iosIndex); } ) ; for ( let i = 0 ; i < stepElems . length ; i ++ ) { io . observe ( stepElems [ i ]) ; //stepElems[i].setAttribute('data-index', i); stepElems [ i ] . dataset . index = i ; graphicElems [ i ] . dataset . index = i ; //console.log(stepElems[i].setAttribute('data-index', i)); } // 활성화 function activate ( action ){ currentItem . classList . add ( ' visible ' ) ; if ( action ) { actions [ action ]() ; // 오류 } console . log ( action ) ; } // 비활성화 function inactivate (){ currentItem . classList . remove ( ' visible ' ) ; } window . addEventListener ( ' scroll ' , () => { let step ; let boundingRect ; let temp = 0 ; //for (let i = 0; i < stepElems.length; i++){ for ( let i = ioIndex - 1 ; i < ioIndex + 2 ; i ++ ) { step = stepElems [ i ] ; if ( ! step ) continue ; boundingRect = step . getBoundingClientRect () ; //console.log(boundingRect.top); temp ++; // 범위설정 if ( boundingRect . top > window . innerHeight * 0.1 && boundingRect . top < window . innerHeight * 0.8 ) { //console.log(step.dataset.index); //graphicElems[step.dataset.index].classList.add('visible'); if ( currentItem ) { inactivate () ; } currentItem = graphicElems [ step . dataset . index ] ; activate ( currentItem . dataset . action ) ; // 오류 } } console . log ( temp ) ; } ) ; activate () ; } )() ; // 즉시실행 인명함수 ( () => { const actions = { bordFlies (){ document . querySelector ([ ' data-index="2" ' ] . bird ) . style . transform = ` translateX($(window.innerWidth)px) ` ; } } const stepElems = document . querySelectorAll ( ' .step ' ) ; const graphicElems = document . querySelectorAll ( ' .graphic-item ' ) ; // 현재 활성화된(visible 클래스가 붙은) .graphic-item을 지정 let currentItem = graphicElems [ 0 ] ; let ioIndex ; const io = new IntersectionObserver ( ( entries , observer ) => { //console.log(entries[0].target.dataset.index); ioIndex = entries [ 0 ] . target . dataset . index * 1 ; //console.log(iosIndex); } ) ; for ( let i = 0 ; i < stepElems . length ; i ++ ) { io . observe ( stepElems [ i ]) ; //stepElems[i].setAttribute('data-index', i); stepElems [ i ] . dataset . index = i ; graphicElems [ i ] . dataset . index = i ; //console.log(stepElems[i].setAttribute('data-index', i)); } // 활성화 function activate ( action ){ currentItem . classList . add ( ' visible ' ) ; if ( action ) { actions [ action ]() ; // 오류 } console . log ( action ) ; } // 비활성화 function inactivate (){ currentItem . classList . remove ( ' visible ' ) ; } window . addEventListener ( ' scroll ' , () => { let step ; let boundingRect ; let temp = 0 ; //for (let i = 0; i < stepElems.length; i++){ for ( let i = ioIndex - 1 ; i < ioIndex + 2 ; i ++ ) { step = stepElems [ i ] ; if ( ! step ) continue ; boundingRect = step . getBoundingClientRect () ; //console.log(boundingRect.top); temp ++; // 범위설정 if ( boundingRect . top > window . innerHeight * 0.1 && boundingRect . top < window . innerHeight * 0.8 ) { //console.log(step.dataset.index); //graphicElems[step.dataset.index].classList.add('visible'); if ( currentItem ) { inactivate () ; } currentItem = graphicElems [ step . dataset . index ] ; activate ( currentItem . dataset . action ) ; // 오류 } } console . log ( temp ) ; } ) ; activate () ; } )() ;

kain74 · Answer

아 그런가요?  처음부터 똑같이 따라했는데... 다시 봐야겠네요 ㅠㅠ

kde · Answer

에러 메시지 화면, 그 에러랑 관련있는 코드를 캡쳐해 주셔야 도와드릴 수 있어요. 즉시실행 익명함수 3개?? 정도 주셨는데 세 개 어떻게 다른 건지 안알려주셔서 맨 처음 꺼만 봤어요.  일단 위에 캡쳐만 보면 저희 수업할 때 코드랑 많이 다른 거 같아요 아직 코드 덜 작성하신 것 같아요. actions 메소드 두 개 필요한데 일단 님은 하나밖에 안 만드신 것 같아요.  html에 data-action을 birdFlies랑   birdFlies2 두 개 추가했었기 떄문에 메소드도 두개 필요하거든요. 근데 birdFlies 꺼만 만드셨어요. 스크롤 되면서 birdFlies2 호출할 때 해당 함수가 없어서 에러났을 것 같아요.