190131 TIL AMAZON step3 - layer && classList
Jan 31, 2019
»
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 = "";
}
});
계속 null이 찍히는데!!
chrome 개발자 도구에선 잘만 찍히는 것이다.
이건 도대체 뭐지… querySelectorAll를 해야하는 것인가… ‘shown’ 만으로 해야하는 것인가 하다가 원인을 찾았다 ㅋㅋ
GIF 재밌어서 별 것도 아닌데 다 짤로 만들고 있음…
classList로 아직 class가 추가되기 전에 내가 전역에 먼저 선언해서 그런거였음…ㅎㅎㅎ
함수 내에서 실행했더니 잘된다. 그렇게 스코프를 공부해놓고… 이런 실수를 하다니~ 바보~