190131 TIL AMAZON step3 - layer && classList

» 1막, TIL (Today I Learned)

AMAZAON step3

바보같은 실수

seeMoreBtn.addEventListener("click", function () {
    plansExtender.classList.add('shown');
});

classList로 추가한 class에 접근하려고 했는데,

const seeMoreBtn = document.querySelector('.plans-see-more-txt');
const plansExtender = document.querySelector('.plans-extender');
const plansExtenderShown = document.querySelector('.plans-extender.shown'); //<- 이 아이... 
const closeExtenderBtn = document.querySelector('.plans-extender-btn');
const header = document.querySelector('.header')

window.addEventListener("scroll", function (e) {
    console.log(window.scrollY)
    if (window.scrollY < 99) {
        plansExtender.style.position = 'absolute';
        plansExtender.style.transition = "";
        console.log(plansExtenderShown);
        plansExtender.style.top = '6.5rem';
        header.style.position = 'relative';
    }
    else {
        plansExtender.style.position = 'fixed';
        plansExtender.style.top = '0';
        header.style.position = '';
        plansExtender.style.transition = "";
    }
});

image

계속 null이 찍히는데!!
chrome 개발자 도구에선 잘만 찍히는 것이다.

image

이건 도대체 뭐지… querySelectorAll를 해야하는 것인가… ‘shown’ 만으로 해야하는 것인가 하다가 원인을 찾았다 ㅋㅋ

jan-31-2019 15-12-46

GIF 재밌어서 별 것도 아닌데 다 짤로 만들고 있음…

classList로 아직 class가 추가되기 전에 내가 전역에 먼저 선언해서 그런거였음…ㅎㅎㅎ
함수 내에서 실행했더니 잘된다. 그렇게 스코프를 공부해놓고… 이런 실수를 하다니~ 바보~