<h1 class="bandname">はっぴいえんど</h1>
<div class="spec">
<section class="album">
<h2 class="title"></h2>
<p class="release"></p>
<ol class="track"></ol>
</section>
</div>
</section>
//アルバムデータ
var albums = [
{ //1枚目
title: "はっぴいえんど",
release: "1970/8/5",
track: [
"春よ来い",
"かくれんぼ",
"しんしんしん",
"飛べない空",
"敵タナトスを想起せよ!",
"あやか市の動物園",
"12月の雨の日",
"いらいら",
"朝",
"はっぴいえんど",
"続はっぴ-いいえ-んど"
]
},
{ //2枚目
title: "風街ろまん",
release: "1971/11/20",
track: [
"抱きしめたい",
"空いろのくれよん",
"風をあつめて",
"暗闇坂むささび変化",
"はいからはくち",
"はいから・びゅーちふる",
"夏なんです",
"花いちもんめ",
"あしたてんきになあれ",
"颱風",
"春らんまん",
"愛餓を"
]
},
{ //3枚目
title: "HAPPY END",
release: "1973/2/25",
track: [
"風来坊",
"氷雨月のスケッチ",
"明日あたりはきっと春",
"無風状態",
"さよなら通り3番地",
"相合傘",
"田舎道",
"外はいい天気",
"さよならアメリカさよならニッポン"
]
}
]
//外枠アクセス
var spec = document.querySelector('.spec');
//テンプレ複製
//(アルバム枚数-1枚)
for (var i=1; i < albums.length; i++) {
var clone = spec.firstElementChild.cloneNode(true);
spec.appendChild(clone);
}
//タイトル、発売日、曲名アクセス
var specTitle = document.querySelectorAll('.title');
var specRelease = document.querySelectorAll('.release');
var specTrack = document.querySelectorAll('.track');
//アルバムデータ入力(アルバム枚数分)
for (var i=0; i < albums.length; i++) {
//タイトル入力
specTitle[i].innerHTML = albums[i].title;
//発売日入力
specRelease[i].innerHTML = albums[i].release;
//曲名入力(曲数分ループ)
for(var t=0; t < albums[i].track.length; t++) {
var list = document.createElement('li');
list.innerHTML= albums[i].track[t];
specTrack[i].appendChild(list);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.