같은 팀원 분이 알려주신 내장함수 toggle! 이렇게 간편하게 한줄로 class를 붙일 수 있다니
///A01 하트 버튼 클릭시 하트 칠하기
const btnHeart = document.querySelector('.btn-heart');
function fillHeartRed() {
console.log('btnHeart.className', btnHeart.className);
btnHeart.classList.toggle('on');
btnHeart.addEventListener('click', fillHeartRed);
toggle을 몰랐다면 contains와 add, remove를 사용해서 여러줄이 되었을 터..
// class안에 on이 있냐?
if(btnHeart.classList.contains('on')){
// YES::
btnHeart.classList.remove('on');
}else{
// NO::
btnHeart.classList.add('on');
}
// class가 btn btn-heart on과 다른가?
if(btnHeart.className !== 'btn btn-heart on') {
btnHeart.classList.add('on');
}else{
btnHeart.classList.remove('on');
하트버튼 이런 모습이다.