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
}
}
Author And Source
이 문제에 관하여(9-2 QUIZ 영화 정리하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jinhengxi/9-2-QUIZ-영화-정리하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)