<div id="menu">
<div class="albums-item" data-artist="AC/DC" data-title="Rock or Bust">1</div>
<div class="albums-item" data-artist="Audioslave" data-title="Audioslave">2</div>
<div class="albums-item" data-artist="Clown Core" data-title="Toilet">3</div>
<div class="albums-item" data-artist="Faith No More" data-title="King for a Day, Fool for a Lifetime">4</div>
<div class="albums-item" data-artist="Joe Satriani" data-title="Shockwave Supernova">5</div>
</div>
<div>
<h3></h3>
<p></p>
</div>
.albums-item {
margin: 2px;
width: 50px;
height: 20px;
border: 1px solid #CCC;
cursor: pointer;
}
const h3 = document.querySelector('h3');
const p = document.querySelector('p');
const onClick = ({ target }) => {
if (!target.classList.contains('albums-item')) {
return;
}
const { artist, title } = target.dataset;
h3.innerText = artist;
p.innerText = title;
};
document.querySelector('#menu').addEventListener('click', onClick);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.