인프런 커뮤니티 질문&답변
작성한 질문수
오류가 나는데 찾지를 못하겠어요...
작성
·
255
0
// 즉시실행 인명함수
(() => {
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();
})();
답변 2
0
0
에러 메시지 화면, 그 에러랑 관련있는 코드를 캡쳐해 주셔야 도와드릴 수 있어요.
즉시실행 익명함수 3개?? 정도 주셨는데 세 개 어떻게 다른 건지 안알려주셔서 맨 처음 꺼만 봤어요.
일단 위에 캡쳐만 보면 저희 수업할 때 코드랑 많이 다른 거 같아요 아직 코드 덜 작성하신 것 같아요.
actions 메소드 두 개 필요한데 일단 님은 하나밖에 안 만드신 것 같아요.
html에 data-action을birdFlies랑 birdFlies2 두 개 추가했었기 떄문에 메소드도 두개 필요하거든요. 근데
birdFlies 꺼만 만드셨어요. 스크롤 되면서 birdFlies2 호출할 때 해당 함수가 없어서
에러났을 것 같아요.