게시물에 있는 하트를 누르면 하트에 불이 들어오는 기능을 추가해보도록 하겠습니다.

먼저 main.js의 위치를 body 가장 밑으로 옮겨 줍니다. 가장 위에 있을 경우 웹 페이지가 로드되기 전에 코드가 실행되어 문제가 발생할 수 있습니다.

JS를 위에 놓고 사용할 수도 있습니다. JS에 기다리라는 명령어를 주어 사용할 수도 있습니다. HTML문서가 로드될 때까지 기다렸다가 실행하라는 뜻을 갖고 있습니다.

파일명 : js/main.js

window.addEventListener('DOMContentLoaded',function(){
  
});

저희는 body 앞 부분에 넣도록 하겠습니다.

파일명 : index.html

    **...**

    **<script src="js/main.js"></script>**
</body>
</html>

먼저 잘 클릭되는지 확인하기 위하여 콘솔 창에 메시지를 띄워보도록 하겠습니다.

파일명 : js/main.js

const heart = document.querySelector( '.heart_btn'); // 하트 요소 부분을 선택해서 가져옴

heart.addEventListener('click', function(){
    console.log('hit');
    // heart.classList.toggle('on'); // 하트를 클릭하면 .on 클래스를 추가
});