整理9-2 QUIZムービー
5609 ワード
自分の好きな映画を整理する
今回は自分の好きな映画の情報を印刷します.
設定コードは、ボタンを押したときにオブジェクトとして格納されたムービー情報を出力する.
今回は自分の好きな映画の情報を印刷します.
設定コードは、ボタンを押したときにオブジェクトとして格納されたムービー情報を出力する.
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
}
}
Reference
この問題について(整理9-2 QUIZムービー), 我々は、より多くの情報をここで見つけました https://velog.io/@jinhengxi/9-2-QUIZ-영화-정리하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol