Как вывести нужный элемент по клику?

Question

[Danya Wyse]

Есть к примеру 10 альбомов, по клику на определенный альбом нужно чтобы выводилась некая его информация, но выводится информация с первого альбома. Получается что js прочитывает только первый элемент.

Вот код самих альбомов

const albumShow = document
  .querySelectorAll(".albums-item")
  .forEach(function (albumShow) {
    albumShow.addEventListener("click", (e) => {
      albumShow.classList.add('isActive');
      album = albumShow.dataset.album;
      albumImage = album;
      if (album == "bandana") {
        showPlaylist(bandana);
        showAlbum(albumImage);
      } else if (album == "hybridTheory") {
        showPlaylist(hybridTheory);
        showAlbum(albumImage);
      }
    });

  //* Рендер списка песен активного альбома
    function showPlaylist(visibleAlbum) {
      for (let i = 0; i < visibleAlbum.length; i++) {
        let trackContainer = document.createElement("div");
        trackContainer.classList.add("track");

        let trackName = document.createElement("p");
        trackName.classList.add("track-name");
        trackName.innerText = visibleAlbum[i].name;

        let trackArtist = document.createElement("p");
        trackArtist.classList.add("track-artist");
        trackArtist.innerText = visibleAlbum[i].artist;

        let mainTrack = document.createElement("audio");
        mainTrack.classList.add("main-track");
        mainTrack.setAttribute("src", `files/${visibleAlbum[i].src}.mp3`);
        trackContainer.append(mainTrack);
        trackContainer.append(trackName);
        trackContainer.append(trackArtist);
        playlist.append(trackContainer);
        trackContainer.addEventListener("click", () => {
          mainTrack.play();
        });
      }
    }

    //* Рендер активного альбома
    function showAlbum(activeAlbum) {
      if (albumShow.classList.contains('isActive')) {
      // document.querySelector('.active-album__image').setAttribute("src", `img/albums/${activeAlbum}.jpg`);
      // document.querySelector('.album-info__title').innerText = document.querySelector('.albums-item__title').innerText;
      // document.querySelector('.album-info__subtitle').innerText = document.querySelector('.albums-item__artist').innerText;
    }
  }

И вот рендер активного альбома работает только на первый, как исправить ?

Comments

[Сергей Соколов]

не путаетесь в названиях showAlbum() / albumShow ? Кстати, последняя константа получает значение undefined, и зачем она вообще?

..А, нет, всё-таки путаетесь:

function showAlbum(activeAlbum) {
      if (albumShow.classList.contains('isActive')) {

[Danya Wyse]

Сергей Соколов, нет, не путаюсь все верно написано

[Сергей Соколов]

Danya Wyse, в тех двух строчках что делает albumShow ?

[Danya Wyse]

Сергей Соколов, функция showAlbum рендерит альбом на который я нажимаю albumShow. Я не оправдываюсь, переменные действительно названы ужасно и буду работать над этим.

[Danya Wyse]

Сергей Соколов, А еще мне бы хотелось получить совет, как избавиться в коде от вот такого мусора

let visibleAlbum = "";
let album = "";
let albumImage = "";

Мне они нужны глобально
Например в переменную visibleAlbum попадает кликнутый альбом который содержит json информацию по нему и в цикле проходится и достает нужное

function showPlaylist(visibleAlbum) {
      for (let i = 0; i < visibleAlbum.length; i++) {
        let trackContainer = document.createElement("div");
        trackContainer.classList.add("track");

        let trackName = document.createElement("p");
        trackName.classList.add("track-name");
        trackName.innerText = visibleAlbum[i].name;

        let trackArtist = document.createElement("p");
        trackArtist.classList.add("track-artist");
        trackArtist.innerText = visibleAlbum[i].artist;

        let mainTrack = document.createElement("audio");
        mainTrack.classList.add("main-track");
        mainTrack.setAttribute("src", `files/${visibleAlbum[i].src}.mp3`);
        trackContainer.append(mainTrack);
        trackContainer.append(trackName);
        trackContainer.append(trackArtist);
        playlist.append(trackContainer);
        trackContainer.addEventListener("click", () => {
          mainTrack.play();
        });
      }
    }

Answer 1

[Сергей Соколов]

Короткий пример с данными из data-атрибутов,
и единственным слушателем клика — на общем родителе:

Comments

[Danya Wyse]

Работает, конкретно если нажать на title либо на artist
Хочется в целом нажимать на блок

const onClick = ({ target }) => {
  const { title, artist } = target.dataset;
  actualTitle.innerText = title;
  actualArtist.innerText = artist;
};
document.querySelector(".albums-wrapper").addEventListener("click", onClick);

[Danya Wyse]

то есть если я условно нажму на картину альбома, то выведет undefined, а если на заголовок то только заголовок выдаст.

[Danya Wyse]

Сделал немного по своему, но то что хотел - получилось. Спасибо!

Answer 2

[Noder SS]

Тот, на который клик? Тогда так:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="album">Я альбом первый</div>
    <div class="album">Я альбом второй</div>
    <div class="album">Я альбом третий</div>
    <div class="album">Я альбом четвертый</div>
    <div class="album">Я альбом пятый</div>
    <div class="album">Я альбом шестой</div>
    <div class="album">Я альбом седьмой</div>
    <div class="album">Я альбом восьмой</div>
    <div class="album">Я альбом девятый</div>
    <div class="album">Я альбом десятый</div>
</body>
<style>
    @import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);
    *{
        margin:0;
        padding:0;
    }
    .album{
        width: 200px;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 15px;
        font-family: Montserrat;
        color: white;
        background: black;
        border-radius: 2px;

    }
</style>
<script>
   let albums = Array.from(document.querySelectorAll('.album'))
   albums.forEach(function(alb){
alb.onclick = function(){
    alert(alb.innerHTML)
}
   })
    
</script>
</html>

На стильчики не обращайте внимания, для окуратности написал