0

So I am making an app that shows top songs by artist with a preview of it when you click the image it plays the first song for each album in the list. I got the image to play preview but for some reason the loop applies same link to all images instead of links from the array that is holding the url for respective song.Here is the code that I am using.

for(i=0; i < songs.length;i++){

     var x = document.createElement("FIGURE");
     x.setAttribute("id", "myFigure");
     document.body.appendChild(x);
     var z = document.createElement("FIGCAPTION");
     z.id = 'cap';
     z.setAttribute("value",songs[0]);
     z.innerHTML = songs[i];
     var y = document.createElement("IMG");
     y.id = "album";
     y.title =  songs[i];
     y.src = songImg[i];
     y.setAttribute("width", "204");
     y.setAttribute("width", "128");
     aud.src += songPrev[i];
     aud.id = "prev";
     y.onclick = function () {
     aud.play();
     console.log(aud);
     console.log(aud.textTracks.length);
}

  x.appendChild(y);
  x.appendChild(z);
  x.appendChild(aud);
}
Niraj
  • 1
  • 1
  • 1
    `aud.src += songPrev[i];` - On each iteration of the loop this concatenates extra text to the end of the same `aud.src`, which doesn't make sense. Within each element's `onclick` handler you refer to the same `aud` variable. – nnnnnn Apr 09 '17 at 06:19
  • loop will be long completed by the time `onclick ` occurs – charlietfl Apr 09 '17 at 06:20
  • I know that I am overriding the link each time but I am not sure how to fix it. My main goal is to attach respective preview links to the album images. – Niraj Apr 09 '17 at 17:41

0 Answers0