9-2 QUIZ 영화 정리하기

✅ 퀴즈 : 자신이 좋아하는 영화 정리하기

이번엔 자신이 좋아하는 영화의 정보를 출력해보겠습니다.

버튼을 눌렀을 때 객체로 저장된 영화의 정보를 출력하도록 코드를 구성 해 보세요.

HTML

<div class="movie_container">
        <button class="movie_btn">인셉션</button>
        <button class="movie_btn">인터스텔라</button>
        <button class="movie_btn">말할수없는비밀</button>
        <div class="movie">
            <h1 class="movie_title">인셉션</h1>
            <ul>
                <li class="movie_year">2010</li>
                <li class="movie_content">액션/SF</li>
            </ul>
        </div>
    </div>

JS

const movies = [
  {
    title : '인셉션',
    year : 2010,
    content : '액션/SF'
  },
  {
    title : '인터스텔라',
    year : 2014,
    content : 'SF'
  },
  {
    title : '말할수없는비밀',
    year : 2007,
    content : '판타지'
  }
]

const movieBtn = document.querySelectorAll('.movie_btn');
const movieTitle = document.querySelector('.movie_title');
const movieYear = document.querySelector('.movie_year');
const movieContent = document.querySelector('.movie_content');

for(let i = 0; i < movieBtn.length; i++){
  movieBtn[i].onclick = ()=>{
      movieTitle.innerText = movies[i].title
      movieYear.innerText = movies[i].year
      movieContent.innerText = movies[i].content
  }
}