JS | 댓글 좋아요/삭제 기능

댓글 좋아요/삭제 기능 구현

인스타 클론 코딩 중 각 게시글의 댓글에 좋아요 추가/삭제 기능을 구현하였다.
화면 구조는 아래와 같고 각 댓글의 DOM 구조는 아래 코드와 같다.

 <div class="comment">
     <span class="commentId">john.johnson</span>
     <span class="commentContent">what the heck</span>
     <button class="likeBtn">
          <svg aria-label="좋아요" class="_8-yf5 white" display="none"...."></svg>
          <svg aria-label="좋아요 취소" class="_8-yf5 red" display="none"..."></svg>
      </button>
 </div>

채우기 색이 없는 하트와 채우기 색이 빨간색인 2가지 svg 파일이 각각의 .likeBtn에 들어있고, 각각 하얀 하트는 display="inline-block", 빨간 하트는 display="none" 값을 주어 하얀 하트만 버튼에서 나오게 되어있다.

첫번째 방법

const likeBtn = document.querySelector('button');
const svgs = likeBtn.getElementsByTagName('svg');

likeBtn.addEventListener('click', (e) => {
    console.log("clicked" + e);
    const like = svgs[0];
    const disLike = svgs[1];
    if(disLike.getAttribute('display') === 'none') {
        like.setAttribute('display', 'none');
        disLike.setAttribute('display', 'inline-block');
    } else {
        like.setAttribute('display', 'inline-block');
        disLike.setAttribute('display', 'none');
    }
})

1. 우선 .likeBtn 이 클릭되면 getElementByTagName 메소드를 사용하여 하위에 있는 svg 파일을 모두 배열로 담아온다.
2. .likeBtn 요소가 클릭되면 getAttribute 메소드를 사용하여 특정 svg 파일의 display 값이 무엇인지 확인한다.
3. display 값이 none인 요소는 inline-block 값을 주고, display 값이 inline-block인 요소는 none 값을 할당한다.

Error

오직 첫번째 요소만 정상으로 작동한다. 맨 상단 그림에서 john.johnson의 댓글의 하트만 작동하고 나머지 하트는 기능이 동작하지 않는다.
=> likeBtn 의 selector 가 모든 button을 가져오지 못해 발생한 오류로 보인다.

두번째 방법

const likeBtns = document.querySelectorAll('.likeBtn');

for (const likeBtn of likeBtns) {
    likeBtn.addEventListener('click', (e) => {
        const svgs = likeBtn.getElementsByTagName('svg');
        console.log("clicked" + e);
        const like = svgs[0];
        const disLike = svgs[1];
            if(disLike.getAttribute('display') === 'none') {
                like.setAttribute('display', 'none');
                disLike.setAttribute('display', 'inline-block');
            } else {
                like.setAttribute('display', 'inline-block');
                disLike.setAttribute('display', 'none');
            }
    });
}

for..of 문법을 사용하여 querySelectorAll 로 가져온 likeBtns 배열의 요소인 likeBtn 각각에 addEventListener 메소드를 사용하였다.

Additional Error !!
페이지가 처음 로딩 되었을 때 모든 likeBtn에는 기능이 동작하지만, 새로운 댓글을 입력하면 이미 생성된 likeBtns 에 포함되지 않아 기능이 동작하지 않는다.
=> 댓글이 입력될 때마다 likeBtns 를 새로 업데이트 해줘야한다.