안녕하세요 선생님!
탭기능 만들며 배우는 for 반복문 탭기능 구현 숙제 질문 드려요~
// 버튼 0을 누르면
// 모든 버튼에 붙은 orange class 제거
// 버튼 0에 orange class명 추가
// 모든 div에 붙은 show 클래스명 제거
// div 0에 show class명 추가
var tabButton = document.querySelectorAll('.tab-button');
tabButton[0].addEventListener('click', function(){ // 버튼 0을 누르면
tabButton.classList.remove('orange'); // 모든 버튼에 붙은 orange 클래스 제거
tabButton[0].classList.add('orange'); // 버튼 0에 orange 클래스 추가
}) // 이렇게 해서 버튼 0을 클릭하면 Uncaught TypeError: can't access property "remove", tabButton.classList is undefined 이렇게
에러가 뜹니다...ㅠㅠ
그래서 혹시 orange 클래스가 두번째 버튼[1]에만 있어서 안먹는 건가 싶어
var tabButton = document.querySelectorAll('.tab-button');
tabButton[0].addEventListener('click', function(){ // 버튼 0을 누르면
tabButton[1].classList.remove('orange'); // 모든 버튼에 붙은 orange 클래스 제거
tabButton[0].classList.add('orange'); // 버튼 0에 orange 클래스 추가
}) // 이렇게 인덱싱을 해주니까 에러가 안 뜨더라구요...
왜 첫번째 코드는 안되는건지..제가 두번째 코드로 이해한게 맞는건지 지금 한 시간째 고민중인데요...지혜를 주시면 감사하겠습니다~~~
