<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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.