how To give an ID to an element created with innerHTML in javascript?

YasirLasfar
May 14, 2023
116 views
2 votes
3 Answers

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>

Answers

- ZyamMaqsood
- May 13, 2023 at 11:25 pm
- 0 votes
0
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.

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

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

Please signup or login to give your own answer.

Click here to cancel reply.