skip to Main Content

I created a parent div in html and created an array of objects that contains infos about the child Divs, and because there is a lot of songs I can’t create all of theme in HTML, what I want is when I click a song the infos in the object get added to the player what I’m thinking of is some how create a loop that gives IDs to each objects of the songs so that I can create I loop that get’s the ID of the clicked elements and get the right infos.

This is my Code :

const playlistSongs = document.querySelector(".playlist-songs");
const btns = document.querySelector('.song-details');
const playingNow = document.querySelector('.song-p-now');

const goodVibesPlaylist = [{
    img: 'img/2.jpg',
    idd: 1,
    songName: 'Am I Wrong',
    audio: new Audio('audio/Am-I-wrong.mp3'),
    artist: 'Nico & Vinz',
  },
  {
    img: 'img/3.jpg',
    idd: 2,
    songName: 'Sex,Drugs,Etc',
    audio: new Audio('audio/Sex-Drugs-Etc.mp3'),
    artist: 'Beach Weather',

  },


  {
    img: 'img/7.jpg',
    idd: 3,
    songName: 'Me Myself & I ',
    audio: new Audio('audio/Me-Myself-I.mp3'),
    artist: 'G-easy',

  },

  {
    img: 'img/4.jpg',
    idd: 4,
    songName: 'Blood In The Water',
    audio: new Audio('audio/Blood-In-The-Water.mp3'),
    artist: 'grandson',
  },

  {
    img: 'img/5.jpg',
    idd: 5,
    songName: 'Eastside',
    audio: new Audio('audio/Eastside.mp3'),
    artist: 'Benny Blanco',
  },

  {
    img: 'img/6.jpg',
    idd: 6,
    songName: 'Everything Black ',
    audio: new Audio('audio/Everything-Black.mp3'),
    artist: 'Unlike Puto',

  }
]

// That's How I add the songs 

let songsHTML = '';

const elemt = document.createAttribute

for (let song of goodVibesPlaylist) {
  const html = `
   <div class="song-details" id="${song.idd}"> //here how I tried to give IDs
    <div class="song-num " >${song.idd}</div>
    <div class="song-poster"><img src=${song.img} alt=""></div>
    <div class="song-artist-name">
        <div class="song-name">${song.songName}</div>
        <div class="artist-name">N${song.artist}</div>
    </div>
    <div class="play-btn"><span class="material-symbols-outlined">
        play_arrow
        </span>
    </div>
    </div>`;

  songsHTML += html;
  console.log(btns.id)
}

document.querySelector('#addTo')
  .innerHTML = songsHTML;


// This is the eventListnner loop


for (let song of btns) {

  playingNow.innerHTML = ` <div class="song-poster"><img src="img/7.jpg" alt=""></div>
<div class="song-artist-name">
    <div class="song-name">Me,Myself & I</div>
    <div class="artist-name">G-easy</div>
</div>`

}
<div class="playlist-songs" id="addTo"></div>

<div class="song-p-now">
  <div class="song-poster"><img src="img/7.jpg" alt=""></div>
  <div class="song-artist-name">
    <div class="song-name">Me,Myself & I</div>
    <div class="artist-name">G-easy</div>
  </div>
</div>

3

Answers


  1. When you are selecting the div by const btns = document.querySelector('.song-details');. At that point. No div with class "song-details" exists. What you are doing is you selecting an element before it is even created. I believe this might fix the issue.

    window.onload = function(){
      const btns = document.querySelector('.song-details');
    }
    

    https://www.w3schools.com/jsref/event_onload.asp
    Read more about onload event here

    Login or Signup to reply.
  2. You can use a <template> element to organize your code better.

    <template id="songTemplate">
      <div class="song-details"> IDs
        <div class="song-num"></div>
        <div class="song-poster"><img alt=""></div>
        <div class="song-artist-name">
          <div class="song-name"></div>
          <div class="artist-name"></div>
        </div>
        <div class="play-btn"><span class="material-symbols-outlined">
          play_arrow
          </span>
        </div>
      </div>
    </template>
    

    Then, you can easily access all the elements through query selectors.

    const template = document.getElementById("songTemplate");
    for (let song of goodVibesPlaylist) {
      const content = template.content.cloneNode(true);
      content.querySelector('.song-details').id = song.idd;
      content.querySelector('.song-num').textContent = song.idd;
      content.querySelector('.song-poster > img').src = song.img;
      content.querySelector('.song-name').textContent = song.songName;
      content.querySelector('.artist-name').textContent = 'N' + song.artist;
      console.log(content.firstElementChild.id);
      document.querySelector('#addTo').append(content);
    }
    
    Login or Signup to reply.
  3. const goodVibesPlaylist = [{
        img: 'img/2.jpg',
        idd: 1,
        songName: 'Am I Wrong',
        audio: new Audio('audio/Am-I-wrong.mp3'),
        artist: 'Nico & Vinz',
      },
      {
        img: 'img/3.jpg',
        idd: 2,
        songName: 'Sex,Drugs,Etc',
        audio: new Audio('audio/Sex-Drugs-Etc.mp3'),
        artist: 'Beach Weather',
    
      },
    
    
      {
        img: 'img/7.jpg',
        idd: 3,
        songName: 'Me Myself & I ',
        audio: new Audio('audio/Me-Myself-I.mp3'),
        artist: 'G-easy',
    
      },
    
      {
        img: 'img/4.jpg',
        idd: 4,
        songName: 'Blood In The Water',
        audio: new Audio('audio/Blood-In-The-Water.mp3'),
        artist: 'grandson',
      },
    
      {
        img: 'img/5.jpg',
        idd: 5,
        songName: 'Eastside',
        audio: new Audio('audio/Eastside.mp3'),
        artist: 'Benny Blanco',
      },
    
      {
        img: 'img/6.jpg',
        idd: 6,
        songName: 'Everything Black ',
        audio: new Audio('audio/Everything-Black.mp3'),
        artist: 'Unlike Puto',
    
      }
    ]
    
    // That's How I add the songs 
    
    let songsHTML = '';
    
    const elemt = document.createAttribute
    // this is the loop that creates those elements 
    // put the elements after this loop
    for (let song of goodVibesPlaylist) {
      const html = `
       <div class="song-details" id="${song.idd}"> 
        <div class="song-num " >${song.idd}</div>
        <div class="song-poster"><img src=${song.img} alt=""></div>
        <div class="song-artist-name">
            <div class="song-name">${song.songName}</div>
            <div class="artist-name">N${song.artist}</div>
        </div>
        <div class="play-btn"><span class="material-symbols-outlined">
            play_arrow
            </span>
        </div>
        </div>`;
    
      songsHTML += html;
    }
    
    document.querySelector('#addTo')
      .innerHTML = songsHTML;
    
    
    // This is the eventListnner loop
    
    // at this posint these elements have been created , you can access them now
        const playlistSongs = document.querySelectorAll(".playlist-songs");
        const btns = document.querySelectorAll('.song-details');
        const playingNow = document.querySelectorAll('.song-p-now');
    
    for (let song of btns) {
    
      playingNow.innerHTML = ` <div class="song-poster"><img src="img/7.jpg" alt=""></div>
    <div class="song-artist-name">
        <div class="song-name">Me,Myself & I</div>
        <div class="artist-name">G-easy</div>
    </div>`
    
    }
      <div class="song-p-now">
        <div class="song-poster"><img src="img/7.jpg" alt=""></div>
        <div class="song-artist-name">
          <div class="song-name">Me,Myself & I</div>
          <div class="artist-name">G-easy</div>
        </div>
      </div>

    your code is fine,

    the problem is you are trying to access these elements before they are created,

    const playlistSongs = document.querySelector(".playlist-songs");
    const btns = document.querySelector('.song-details');
    const playingNow = document.querySelector('.song-p-now');
    

    open your devtools and console log btns
    you will see its null, this is becase when you call document.getElementById or document.querySelector for an element that does not exist, you will get null,

    so in your code when you said console.log(btns.id) you are basicly saying console.log(null.id) this will throw an error bacause the null object does not have an id value

    solution

    const playlistSongs = document.querySelector(".playlist-songs");
    const btns = document.querySelector('.song-details');
    const playingNow = document.querySelector('.song-p-now');
    

    put these elements after the for loop that creates them, and use querySelectorAll not querySelector, querySelector will just get the first element it finds with that class

    i have made the canges, see the comments in the code

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search