Javascript problem regarding sending the correct href into the

[mrchow19910319]

I am building a site which looks something like this:

Spoiler

(ignore the misplaced footer there.)

 

I want it to behave in a way that everytime I clicked the thumbnails of those individual playlist, the upper main video changes to the newly clicked video.

Here is the javascript code I have.

 

// constants
const key = 'myAPI key here';
const playlistId = 'UUuSrv3qgQA7SSi6R9bWag5A';
var URL = 'https://www.googleapis.com/youtube/v3/playlistItems';

//youtube API sees all these info, so that it knows what kind of information you want to retrieve
const options = {
  playlistId: playlistId,
  maxResults: 20,
  key: key,
  part: 'snippet'
};

let loadMainVideo = function () {

  //put in options into the URL so that youtube API will work
  URL += '?' + Object.keys(options).map((k) => k + '=' + encodeURIComponent(options[k])).join('&');
  //use fetch to get HTTP request
  fetch(URL)
    .then(res => res.json())
    .then(function (data) {
      // console.log(data);
      loadPlayList(data);
      var first_video_id = data.items[0].snippet.resourceId.videoId;
      //put the 1st video in the playlist into the dom
      document.getElementById('youtube_feed').innerHTML = `
      <iframe width="1280" height="720" src="https://www.youtube.com/embed/${first_video_id}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      `
    })
    .catch(err => console.log(err))
}

loadMainVideo();


/*  
Load Playlist
*/

function loadPlayList(data) {
  console.log(data.items.length); //this gives you 20 which is correct

  //let's try loop through the array using for loop
  for (let i = 1; i < data.items.length; i++) {
    var thumbnail = data.items[i].snippet.thumbnails.medium.url;
    var title = data.items[i].snippet.title.substring(0, 50);
    var videoID = data.items[i].snippet.resourceId.videoId;


    document.getElementById('youtube_playlist').innerHTML += `
      <div class="individual_list_item" data-key = "${videoID}">
      <img src="${thumbnail}" alt="video_thumbnail_placeholder" class="thumbnails">
        <p class="playlist_titles">${title}</p>
    </div>
      `;
  }
}


document.getElementById('youtube_playlist').addEventListener('click', function () {
  //1. click thumbnail, log video ID of the thumbnail video.
  //2. click thumbnail , insert video ID of the thumbnail video into first_video_id in fetch function.
})

In the snippet above I have already successfully inserted all the video snippet into the DOM using .innerHTML += , 

 

How do I get the clicked video's ID then? 

 

[0x21]

51 minutes ago, mrchow19910319 said:

How do I get the clicked video's ID then? 

Should be `this.dataset.key` in the event listener function.