fontawesome 아이콘 a, i태그에 eventListener 적용하기 - 에러와 해결

미션 : 하트를 누르면 좋아요 기능이 작동, ajax로 화면이동 없이 동작

 

에러 : 콘솔창이 1초 떴다가 사라짐

원인 : <a>태그 내에 onclick 이벤트가 잡혀 있었다.

해결 : a태그의 onclick 이벤트를 삭제한다.

 

에러 : articlePK를 잡지 못함

원인 : html 태그에 dataset을 설정하지 않았다. 

해결 : 태그에 dataset을 설정하고, 스크립트에서 해당 태그.dataset...으로 변수 설정한다.

<a data-article-pk="{{ article.pk }}" class="like-a" href="#">

const articlePK = likea.dataset.articlePK

 

에러 : event.target 의 결과가 이상..

원인 : <a>태그가 <i> 태그를 감싸고 있어서 target이 a가 아닌 i를 잡아버렸다.

해결 : a태그를 없애고(사용할 이유가 없음) i태그만 사용한다.

 

-> 이런 현상을 '이벤트 버블링'이라 한다.

 

---

script 위치

index.html 안에 _card.html 이 들어있고 카드가 반복하는 구조.

스크립트를 card 안에 쓰면 const가 계속 사용되는데 const는 재할당 불가하므로 오류발생

따라서 index.html 에서 스크립트를 써야 한다.