[영화검색 사이트] 리스트 요소 클릭 이밴트 만들기

list의 요소를 클릭하면 해당 리스트의 id를 가져오는 기능을 만들겠다

id는 alert으로 보여준다.

id를 가져오는 이유: id는 고유한 index값이기 때문에 id를 통하서 id의 정보를 가져올 수 있다. 

let printId = (id) => {
    alert(`영화 id : ${id}`)
}

id를 매개변수로 받아서 그 id의 값을 alert으로 띄워준다

 

fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options)
    .then(response => response.json())
    .then(response =>
        response.results.forEach(item => {
            let id = item.id;
            let title = item.title
            let poster_path = item.poster_path
            let overview = item.overview;
            let vote_average = item.vote_average;

            let appendHtml =
                `<li class="cell" onclick="printId(\'' + ${id} + '\')">
                    <div class="imgBox">
                    <img src="https://image.tmdb.org/t/p/w500${poster_path}" alt="">
                    </div>
                    <div class="movicInforBox">
                        <span class="movieTitle">${title}</span>
                        <span class="movieoverview">${overview}</span>
                        <span class="movievote_average">평점 : ${vote_average}</span>
                    </div>
                </li>`;
            result += appendHtml
            movieList.innerHTML = result

            searchData.push(item)

        })
    )
    .catch(err => console.error(err));

fatch로 데이터를 받아서 list로 출력하는 함수 이다.

``(백틱)안에 onclick을 집어넣고 onclick을 통해서 printId함수를 불러온 후 printId함수에 매개변수로 id값을 집어넣어준다