개발일지 40 - 좋아요 버튼 이미지로 바꾸기..2

css로 이미지를 수정하는 방법이다.

 

 <script>
    document.getElementById('like-btn').addEventListener('click', function() {
        event.preventDefault();

        const likeBtn = document.getElementById('like-btn');

        // liked 클래스를 토글하여 이미지 변경
        likeBtn.classList.toggle('liked');

        // 폼을 제출
        document.getElementById('like-form').submit();
    });
</script>

 

위와 같은 자바스크립트 코드를 짜고 아래와 같은 css코드를 짜주었다.

 

.liked {
        background-image: url('....liked_button.png'); /* 눌렀을 때 이미지 */
    }

 

이렇게 코드를 구현하니 클릭시에 이미지가 잠깐 바뀌고 기존의 이미지로 돌아오는 문제가 계속해서 남아있었다. 

 

<button type="submit" class = "like-btn {% if comment_user in like_user %}liked{% endif %}" id ="like-btn">좋아요</button>

 

그래서 조건문을 사용해서 좋아요 버튼을 누른 사람이 있을때 class의 이름을 liked로 바꿔서 기존의 이미지로 돌아오는 문제를 해결하려고 했다. 

 

위에 적힌 like_user과 comment_user의 값은 내일 설명하겠다.