포폴 작성 중 질문.

[정시윤]

지난 번 메일로 질문드려던 학생입니다.

header footer 분리

답변주신대로 해봤는데

일부는 작동하고 일부는 작동하지를 않습니다.어떨 떈 작동하고 또 어떨 땐 작동하지를 않습니다. 심지어 코드를 치면 예전엔 uncaught error 어쩌구 떴었는데 이젠 콘솔창도 오류없다고 깨끗하게 나옴.

아직 동기/비동기 개념이 정확하게 숙지가 안 되어있긴 한데 그 때문에 이런 현상이 발생하는건가요?

코드는 다음과 같습니다.

 

 

//전체페이지 공통 영역인 header, footer 불러오기
fetch("header.html")
    .then(response => {
        return response.text()
    })
    .then(data => {
        document.querySelector("header").innerHTML = data;

        //데이터 불러온 후, header 내 작동해야 할 script 구문
        const btnCall = document.querySelector(".btnCall");
        const menuMo = document.querySelector(".menuMo");

        window.addEventListener("load", function () {
            btnCall.onclick = function (e) {
                e.preventDefault();
                btnCall.classList.toggle("on");
                menuMo.classList.toggle("on");
            }
        });
    });

 

[codingapple]

load 이벤트리스너를 없애봅시다

[정시윤]

............ 그렇게 해봤는데 안 됩니다. ㅠ

오히려 예전엔 가끔 클릭하면 떴었는데, 바꾸라는대로 바꿨는데 아예 안뜨는데요

 

[codingapple]

.then(data => {
document.querySelector("header").innerHTML = data;

const btnCall = document.querySelector(".btnCall");
const menuMo = document.querySelector(".menuMo");

btnCall.onclick = function (e) {
  e.preventDefault();
  btnCall.classList.toggle("on");
  menuMo.classList.toggle("on");
}
});

해보니 잘됩니다

안되면 live server 이런걸로 미리보기를 안띄운것일 수도요 

[정시윤]

정말 그렇네요 ㅠㅠ 뭘 잘못한 거지.... 감사합니다!!!!!!!!

[글쓴이]

글