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
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.https://www.w3schools.com/jsref/event_onload.asp
Read more about onload event here
You can use a
<template>
element to organize your code better.Then, you can easily access all the elements through query selectors.
your code is fine,
the problem is you are trying to access these elements before they are created,
open your devtools and console log
btns
you will see its
null
, this is becase when you calldocument.getElementById
ordocument.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 sayingconsole.log(null.id)
this will throw an error bacause thenull
object does not have anid
valuesolution
put these elements after the for loop that creates them, and use
querySelectorAll
notquerySelector
,querySelector
will just get the first element it finds with that classi have made the canges, see the comments in the code