JavaScript播放列表目标元素

Question

I am working on a JavaScript driven audio player with a playlist. I have a problem when I try to add a click event to the elements I want to play.

Apparently I am doing something wrong in the loop because the elements are displayed, yet not played. No errors in the console.

JSFIDDLE HERE

//object
obj = {
    songsrc: ["mariah_carey_all_i_want", "chris_rea_driving", "wham_last_christmas", "dean_martin_snow", "brenda_lee_rocking"],
    title: ["Mariah Carey", "Chris Rea", "Wham", "Dean Martin", "Brenda Lee"],
    songs: ["All I want for christmas is you", "Driving home for christmas", "Last christmas", "Let it snow", "Rocking around"],
    images: ["mariah_carey", "wham", "chris_rea", "dean_martin", "brenda_lee"]
}

// the <ul> in which the li elements I have lay
mylist.addEventListener("click", changeTrack);

// adding the songs to the playlist
addTrack();
function addTrack() {
    for(var i = obj.title.length-1; i >= 0; i--) {
        li = document.createElement("li");
        li.className = "songs_wrap";
        li.innerHTML = "<div class='songs_inner'>" + "<h4>"+obj.title[i]+ "</h4><p>" + obj.songs[i] + "</p></div>";
        mylist.appendChild(li);
    }
}

// trying to make them play when I click a song (a li element)
function changeTrack(event) {
    var target = event.target;
    while (target != mylist) {
        if (target.nodeName == 'LI') 
        {
            for(var i = target; i < obj.songsrc.length; i++)  // I guess this is wrong
            {   
                obj.images.src = "images/" + obj.images[i] + ".jpg";
                var title = playlist_status.innerHTML = obj.title[i];
                var song = playlist_song.innerHTML = obj.songs[i];
                audio.src = dir + obj.songsrc[i] + ext;
                playbtn_icon.className = "icon-pause";
                audio.play();
            }
        }
        target = target.parentNode
    }
}

Answer 1

Not sure I know what you're trying to accomplish with the for loop. But as I see it the problem is that you never enter the for loop. If I gues correctly you're trying to get the index of the target element and do some stuff with that ?

So going by this assumption you could use jquery and get the index of the element you clicked instead.

var i = $(target).index();

and then skip the loop. I can't really test this in jsfiddle because I get errors like "playlist_status" is undefined.